Hi guys,
I live in Italy and as you know here we use dot as thousand separator and comma for decimals.
Exporting datatables using excelHTML5 is making me crazy for number less than 1 thousand.
There is a way to disable number detection in button script? It may be usefull for me to have numbers as strings
Many thanks
Sergio
Hello, i am new at coding and i wanted to know how to pass the controller data to ajax.
Thank you
Hello,
I am new at datatables so i wanted to know what is wrong with my code here. I want to pull data from database and display it to the datatable but it does not show any error on the console and it does not display any data.
attached is my ajax code.
thank you
Is it possible to have a dropdown that updates the contents of another dropdown without committing any changes to the database?
The contents of the 2nd dropdown need to be grabbed from the database.
I can sort of get editor.dependant() working but the first dropdown wants to update the database, which I don't want,
I hope that makes sense.
Since last week the Editor dosent work, i get this jQuery message:
Error adding field - unknown field type display
Is my Editor bought in 2013 expired? I updated jQuery to 3.3.1
_
var editor;
jQuery(document).ready(function() {
editor = new jQuery.fn.DataTable.Editor({
"ajax": "../GV_visitevendeurclientsJS.dtw/majRecord?librairie=$(librairie)&client=$(client)",
"table": "#mytable",
"idSrc": "CVnoVST",
"fields": [
{
"label": "$(W1T_CVnoVST)",
"name": "CVnoVST",
"type": "hidden",
"dataProp": function( iIn ) {
return (jQuery.formatNumber(iIn["CVnoVST"], {format:"#-"}))}
}, {
"type": "**display**",_
Hi, guys! I have a project with DataTables and it is mainly statistical numbers which stay the same, except for today's date. The table data is handled server-side. What I notice is that when data is loaded and when sorting (asc or desc) is applied, DataTables makes another ajax call to get the current data and then sorts. Well, in my case I would like to have sorting the currently displayed values by column without making another ajax request but just to do the sorting. Any idea how to achieve this?
Hi,
I am using datatables to render a table with server side asp.net mvc razor views. I am using the render function to display urls for "editing" rows on the table -
render": function (data, type, row) {
return '<a href=\"LinkedAccountsDetails/' + data + '\">Edit</a>';
}
How do I use url.actions with routevalues instead of hardcoding the urls like above. I am able to get url.actions without routevalues to work but when i try and concatenate the data variable as a route value it doesn't work.
Thanks
Hi there,
I've been through the forums and found a number of old questions on how to have child rows be expanded and collapsed with a slide animation. Here is an old example of the animation effect I am talking about - https://datatables.net/blog/2014-10-02.
I personally chose to use the DataTables Responsive extension (https://datatables.net/extensions/responsive/), which allowed me to configure and customize everything I needed except this nice animation to slide the child rows down and up as I expand and collapse the parent rows of my table. I am looking for any possible options to get this done while still enjoying the built-in Responsive features.
Here's one related discussion when the author was advised to look into implementing the animation by using a custom Responsive renderer for child rows - https://datatables.net/forums/discussion/37855/sliding-responsive-child-rows I have doubts if that is possible but my JS skills do not allow me to dig much deeper.
I would appreciate any advice, including a reference on how to submit a feature request. I have no doubts I am not alone struggling without a nice sliding animation for Responsive DataTables.
I have a table that I can add rows and columns to using jQuery. However, when I add a new row, this doesn't get updated with DataTables and the row is removed once I sort any of the columns or perform any DataTables action. I can provide the code, but it's basically just adding a "<tr><td> </td>... etc </tr>" to the table after the last row.
Any suggestions?
Hi
I am a complete hack when it comes to this sort of thing, but have spent a couple of days trying to solve this problem.
I have a Questions table and Responses Table.
Responses is Left joined to Questions and I have this statement to return all records from Questions and the records from Responses WHERE the Response belongs to the User - pretty simple stuff.
->leftJoin('checklist_responses_tbl', 'checklist_responses_tbl.checklist_question_id' , ' = ', 'checklist_questions_tbl.checklist_question_id AND (checklist_responses_tbl.checklist_assignment_id = "'.$thisUser.'")')
However, the DataTable shows up fine (I can see all the questions, and the responses that $thisUser has submitted) but when I update a value to Responses, the update fails (If I update a Questions value it succeeds)
I cant work out where i am going wrong. Any help would be greatly appreciated.
my data format from firebase data retrieval in the form of an array then I change it using json_encode on php. The results of these changes are as shown below. can anyone help me so that the data can be displayed in the DataTable ?
I have a table presenting data grouped into different regions, but the row group headers (the region names)
are not there on the exported files.
table = $('#compilation').DataTable({
"processing":true,
"serverSide":true,
"searching":false,
"deferRender":true,
"draw":1,
"ajax": endpoint,
"columns":[
{"data": "applied_transaction"},
{"data": "applications"},
{"data": "completed"},
{"data": "process"},
{"data": "rejected"}
],
"select": {
'style':'single'
},
"dom": 'Bfrtip',
"buttons": [
'copy',
'excel',
'pdf'
],
"rowGroup": {
dataSrc : 'region_name'
},
"scrollY": "400px",
"scrollCollapse": true,
"paging": false,
"bDestroy":true
});
Hi,
I have a webmethod which returns data as json. There is more than 500 rows in that. But the datatable not poulating more than 100 rows. I will add my code below,
**Web Method**
public static string TestBigData()
{
List<BACAServiceRequests> lstserviceReq = new List<BACAServiceRequests>();
for (int i = 0; i <= 150; i++)
{
BACAServiceRequests cs = new BACAServiceRequests
{
ID = i,
Request_x0020_No = "No" + i.ToString(),
Requested_x0020_By = "No" + i.ToString(),
Service_x0020_Title = "No" + i.ToString(),
Request_x0020_Assigned_x0020_To = "No" + i.ToString(),
Service_x0020_Category = "No" + i.ToString(),
Task_x0020_Status = "No" + i.ToString(),
Requested_x0020_Date = DateTime.Now,
KPI = 3,
Start_x0020_Date = DateTime.Now,
Expected_x0020_End_x0020_Date = DateTime.Now,
End_x0020_Date = DateTime.Now,
Conformity = "N/A",
Days = 2,
Notes = "solution",
};
lstserviceReq.Add(cs);
}
var jsonData2 = new
{
data = lstserviceReq.Select(item => new
{
ID = item.ID.ToString() ,
RequestNo = item.Request_x0020_No.ToString() ,
RequestedBy = item.Requested_x0020_By.ToString() ,
Title = item.Service_x0020_Title.ToString() ,
AssignedTo = item.Request_x0020_Assigned_x0020_To != "" ,
RequestedService = item.Service_x0020_Category.ToString() != "" ,
RequestStatus = item.Task_x0020_Status.ToString() != "" ,
RequestDate = item.Requested_x0020_Date.ToString(),
KPI = item.KPI.ToString(),
StartDate = item.Start_x0020_Date.ToString(),
ExpectedEndDate = item.Expected_x0020_End_x0020_Date ,
EndDate = item.End_x0020_Date.ToString("dd/MM/yyyy hh:mm:ss tt", CultureInfo.InvariantCulture),
Conformity = "N/A",
TCDays = 3.ToString(),
Solution = item.Notes.ToString(),
})
};
// var jsonData2 =
return Newtonsoft.Json.JsonConvert.SerializeObject(jsonData2);
}
Script
jqhdr(document).ready(function () {
jqhdr.ajax({
url: "/_layouts/15/Pages/WebMethods.aspx/TestBigData",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
async: false,
success: function (json) {
var dataSet = JSON.parse(json.d).data;
jqhdr('#examble').DataTable({
destroy: true,
data: dataSet,
deferRender: false,
scrollY: 200,
scrollCollapse: true,
scroller: true,
"columns": [
{
"data": "ID", "title": "ID", "visible": false
},
{
"data": "RequestNo", "title": "Request No"
},
{ "data": "RequestedBy", "title": "Requested By" },
{ "data": "Title", "title": "Title" },
{ "data": "AssignedTo", "title": "Assigned To" },
{ "data": "RequestedService", "title": "Requested Service" },
{ "data": "RequestStatus", "title": "Request Status" },
{ "data": "RequestDate", "title": "Request Date" },
{ "data": "KPI", "title": "KPI" },
{ "data": "StartDate", "title": "Start Date" },
{ "data": "ExpectedEndDate", "title": "Expected End Date" },
{ "data": "EndDate", "title": "End Date" },
{ "data": "Conformity", "title": "Conformity" },
{ "data": "TCDays", "title": "TCDays" },
{ "data": "Solution", "title": "Solution" }
]
});
}
});
}
HTML
<div class="row">
<table id="examble">
</table>
</div>
I am new to DataTable.net, can anyone help please
Hello there peeps,
i'm using datatables and for pagination i've used paggingtype = "input" and also included its plugin cdn but unfortunately when i did this, this is automatically disabling the First Next Previous and Last pagination buttons and i needed them enabled so that i can use them alongwith input text field.. Any help will be a huge favor
thanks,
Ameer
I am using datatable since my first time developing web application. But I have just some issue in my project this past week and I can't figure it out until now. I've generated my table in server side and I was able to get the data from my DB and it works perfect but when click the pagination button it turns out my pagination button not working properly. I don't know what did I missed. Here is my client side and server side code. Your help will be very much appreciated. Sorry with my english btw. 
Client Side...
$('#tbl-employees-server-side').DataTable( {
"dom" : "Bfrtip",
"pagingType": "full_numbers",
"responsive": true,
"processing": true,
"serverSide": true,
"ajax": {
"url" : "controller/crud_manager.php",
"type": "POST",
"data": {"action":"server_side"}
},
"buttons": [
{
"extend" : 'excelHtml5',
"exportOptions" : {
"columns" : ':visible'
}
},
{
"extend" : 'pdfHtml5',
"exportOptions" : {
"columns" : ':visible'
}
},
{
"extend" : 'print',
"exportOptions" : {
"columns" : [ 0,1,2,3,4 ]
}
},
"colvis"
]
} );
Server Side
$sql = "";
$sql .= "SELECT * FROM master_list ";
$count = "SELECT count(*) FROM master_list ";
$column= array(
0 => 'emp_num',
1 => 'name',
2 => 'hire_date',
3 => 'emp_status',
4 => 'position',
5 => 'emp_num',
); //create column like table in database
if(isset($_POST['search']['value'])){
$sql .= 'WHERE emp_num LIKE "%'.$_POST['search']['value'].'%" ';
$count .= 'WHERE emp_num LIKE "%'.$_POST['search']['value'].'%" ';
$sql .= ' OR name LIKE "%'.$_POST['search']['value'].'%" ';
$count .= ' OR name LIKE "%'.$_POST['search']['value'].'%" ';
$sql .= ' OR emp_status LIKE "%'.$_POST['search']['value'].'%" ';
$count .= ' OR emp_status LIKE "%'.$_POST['search']['value'].'%" ';
$sql .= ' OR position LIKE "%'.$_POST['search']['value'].'%" ';
$count .= ' OR position LIKE "%'.$_POST['search']['value'].'%" ';
}
if (isset($_POST['order'])) {
if ($column[$_POST['order']['0']['column']] != 5) {
$sql .= ' ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
$count .= ' ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
}else{
$sql .= ' ORDER BY name ASC ';
$count .= ' ORDER BY name ASC ';
}
if ($_POST['length'] !=-1) {
$sql .= 'LIMIT '.$_POST['start'].','.$_POST['length'];
$count .= 'LIMIT '.$_POST['start'].','.$_POST['length'];
}
$data = $this->connection->query($sql)->fetchAll(PDO::FETCH_ASSOC);
$filtered_rows = $this->connection->query($count)->fetchColumn();
$getData = array();
foreach ($data as $value) {
$subArray = array();
$subArray[] = $value['emp_num'];
$subArray[] = $value['name'];
$subArray[] = date('M. d, Y',strtotime($value['hire_date']));
$subArray[] = $value['emp_status'];
$subArray[] = $value['position'];
$subArray[] = "<button class='btn btn-xs btn-success btn-view-record' data-emp_num=".$value['emp_num'].">
<i class='fa fa-eye'></i></button>
<button class='btn btn-xs btn-warning btn-edit-record' data-emp_num=".$value['emp_num'].">
<i class='fa fa-edit'></i></button>
<button class='btn btn-xs btn-danger btn-delete-record' data-emp_num=".$value['emp_num'].">
<i class='fa fa-trash'></i></button>";
$getData[] = $subArray;
}
$total_row = $this->connection->query("SELECT count(*) FROM master_list")->fetchColumn();
$result = array(
'draw' => intval($_POST['draw']),
'recordsTotal' => $total_row,
'recordsFiltered' => $filtered_rows,
'data' => $getData
);
return $result;
Hi,
we recently had an accessibilty test and there were 2 problem they mentioned with our datatables. Both issues had to do with elements being disabled only by styling:
2.The column visibility (https://datatables.net/extensions/buttons/examples/column_visibility/simple.html) also has the problem that when columns are deactivated the only thing that happens is that the 'active' css-class is being removed but beside that there is no hint if a column is active or not andthat also is a problem for screenreaders.
I would like to ask if there are solutions for this problem or if they will be addressed in the future.
Thanks and kind regards
Kevin
My solution builds without errors. When I load the webpage the data comes up, but there are no table lines/search etc.
Any help would be appreciated.
Thanks
code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#WTM_TABLE').DataTable();
});
</script>
</head>
<body>
<table id="WTM_TABLE" class="display" style="width:100%">
<thead>
<tr>
<th>Task Name</th>
<th>Start Date/Time</th>
<th>End Date/Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>
</tbody>
</table>
</body>
</html>
I need to show the data of two rows in the editor. The two examples did not help me, because I need both row Data for a compare and Merge. In my case I would see on the left side row1 and on the right side row 2. how can I do this?
Andreas
I'm editing a field inline and checking the value using preSubmit:
editor.on( 'preSubmit', function ( e, data, action ) {
//check a few things
return false;
} );
Return false stops the submission, but leaves the inline editor still in the edit state, is there a way to "end" the edit?
{% extends 'base.html.twig' %}
{% block title %}Marcar Presença | Personalizado{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.jqueryui.min.css">
<link rel="stylesheet" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css">
<link rel="stylesheet" href="{{ asset('build/css/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('build/css/changeDataTable.css') }}">
{% endblock %}
{% block body %}
<section class="content-header">
<h1>
Marcar Presença
<small>dos Candidatos</small>
</h1>
<ol class="breadcrumb">
<li><a href="{{ path('index') }}"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Candidaturas</a></li>
<li><a href="#">Exame de Acesso</a></li>
<li><a href="#">Turmas</a></li>
<li class="active">Marcar Presença Personalizado</li>
</ol>
</section>
<section class="content">
<div class="row">
<div class="col-xs-12">
{% for message in app.flashes('sucesso') %}
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i> Successo!</h4>
{{ message }}
</div>
{% endfor %}
{% for message in app.flashes('erro') %}
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
{{ message }}
</div>
{% endfor %}
<div class="box">
<div class="box-header">
<h3 class="box-title">Marcar Presença | Personalizado (Turma: {{ turma.nome | upper }})</h3>
</div>
<form action="" method="POST">
<!-- /.box-header -->
<div class="box-body">
<div class="box-footer ">
{% if turmaCandidatos is not empty %}
<button type="submit"
class="btn btn-facebook btn-info pull-right">{{ button_label|default('Registar') }}</button>
{% endif %}
</div>
<table id="minhaTabela" class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>Nome do Candidato</th>
<th>Ndi</th>
<th>Data de Nascimento</th>
<th>Telefone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{% for turmaCandidato in turmaCandidatos %}
<tr>
<td>{{ loop.index }}</td>
<td>{{ turmaCandidato.getCandidato.nomeCompleto | upper }}</td>
<td>{{ turmaCandidato.getCandidato.ndi | upper }}</td>
<td>{{ (turmaCandidato.getCandidato.dataNascimeto | date('d-m-Y'))| upper }}</td>
<td>{{ turmaCandidato.getCandidato.telefone | upper }}</td>
<td>{{ turmaCandidato.getCandidato.email }}</td>
</tr>
{% if loop.length < 1 %}
<tr>
<td class="text-center" colspan="9">Nenhum dado encotrado.</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</section>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
<script src="{{ asset('build/js/carregarDataTable.js') }}"></script>
<script>
$(document).ready(function (){
var tabelam = $('minhaTabela').DataTable({
columnDefs: [
{
targets: 0,
checkboxes: {
selectRow: true
}
}
],
select: {
style: 'multi'
},
order: [[1, 'asc']]
});
}
);
</script>
{% endblock %}
