Develop Reference

DataTable plugin using aurelia updating data

I'm using the DataTables and DatePicker plugins with Aurelia.
I basically want the user to select a date and have the data table render the data for that date but with my current code there seems to be an issue with the datatable once the data changes. As soon as the data changes the formatting on the datatable plugin seems off and the sorting, scrolling buttons don't work.
I tried adding the datepicker on a jsfiddle but I had no luck as you have to add some configuration to package.json and I can't seem to figure that out. If anyone could give any hints I would really appreciate it. Let me know if you have any questions
pickerChanged() {
this.picker.events.onChange = (e) => {
this.data = [];
let inputDate = new Date(e.date.format('YYYY-MM-DD') + ' 00:00');
let data = (demoData as any).default;
for (let row of data) {
let rowDate = new Date((row as any).date);
if (inputDate.getTime() >= rowDate.getTime()) {
this.data.push(row);
}
}
console.log(4444, this.data);
$(document).ready(function() {
$('#dataTable').DataTable( {
"scrollY": "280px",
"scrollCollapse": true,
"paging":false,
"searching": false,
"info": false,
"language": {
"emptyTable": " "
}
} );
} );
};
}
<abp-datetime-picker element.bind="picker"></abp-datetime-picker>
<div class="row pt-2">
<div class="col-12">
<table class="table" id="dataTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Receipt #</th>
<th>Invoice number</th>
<th>Date</th>
<th>Total</th>
<th>Balance</th>
<th>Payment</th>
</tr>
</thead>
<tbody>
<tr repeat.for="row of data">
<td>${row.id}</td>
<td>${row.name}</td>
<td>${row.receiptNumber}</td>
<td>${row.invoiceNumber}</td>
<td>${row.date}</td>
<td>${row.total}</td>
<td>${row.balance}</td>
<td>${row.payment}</td>
</tr>
</tbody>
</table>
<div class="text-center" if.bind="!data.length">No records available. Please select a valid date</div>
</div>
</div>

After a few hours of investigating the issue I finally figured it out. The problem with my old code was that I was passing data to the datatable using ${row.id} for example instead of using the data parameter with datatable like follows.
$('#dataTable').DataTable({
data: this.data,
columns: [
{ data: 'id' },
{ data: 'name' },
{ data: 'receiptNumber' },
{ data: 'invoiceNumber' },
{ data: 'date' },
{ data: 'total' },
{ data: 'balance' },
{ data: 'payment' },
]
});
<div class="row pt-2">
<div class="col-12">
<table class="table" id="dataTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Receipt #</th>
<th>Invoice number</th>
<th>Date</th>
<th>Total</th>
<th>Balance</th>
<th>Payment</th>
</tr>
</thead>
</table>
</div>
</div>
and then calling this function whenever you want to update your data
$('#dataTable').DataTable().clear().rows.add(this.data).draw();

Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.min.js:48

i wanted to input data to dataTables with Laravel frameworks. But then i get error.
My script
<script type="text/javascript">
$(document).ready(function(){
$('#tabled').DataTable({
"ajax": {
url: "/bawan",
type: "GET",
dataType: "json"
},
"columns":[
{"data":"id"},
{"data":"title"},
{"data":"nama"},
],})})
Here is the Controller.
function bawan(){
$datan = pekael::join('informasi', 'informasi.user_id', '=', 'pekaels.id')->select('informasi.*', 'pekaels.*')->get();
$data = array('data'=>$datan);
return response()->json($datan);
}
Table views
<table class="table table-striped" cellspacing="0" width="100%" id="tabled" align="center">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
</tr>
</thead>
</table>
I'm really new to frameworks, can somebody tells me where is my mistakes?

Datatables with JSON dynamic content, lose table features

I'm currently trying to fill dynamically a table with content retrieved from a JSON Object.
Here is the table:
<table id="datatable_tabletools" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand">Nom</th>
<th data-hide="phone">Commentaires</th>
<th data-hide="phone,tablet">Date</th>
<th data-hide="phone,tablet">Attachements</th>
<th data-hide="phone,tablet">Actions</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
I have multiple interesting features in the table such as a search option, a filter, sort, export as PDF, etc,....those features are working properly if I'm including static content such as:
<tr>
<td>33</td>
<td>Bevis</td>
<td>1-955-717-0835</td>
<td>Est Ac Inc.</td>
<td>7424</td>
<td>Ichtegem</td>
</tr>
but as soon as I retrieve data table content from My JSON object, I'm not able to use those features anymore, sort doesn't work, search neither.
Here is the JavaScript I'm using:
$(document).ready(function() {
$.get('getAllDocuments', function(responseJson) {
if (responseJson != null) {
var table1 = $("#table");
$.each(responseJson, function(key, value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['id']);
rowNew.children().eq(1).text(value['nom']);
rowNew.children().eq(2).text(value['commentaire']);
rowNew.children().eq(3).text(value['date']);
rowNew.children().eq(4).text(value['id']);
rowNew.children().eq(5).html("Voir Supprimer");
rowNew.appendTo(table1);
});
}
});
});
My table is filled correctly, but not all the functions associated. any idea on how I can fill my table with JSON content in a proper way?

I think you can use ajax option of DataTables like:
var table = $('#example').DataTable( {
ajax: 'data.json'
});
P.S. here is the documentation

Datatable not displaying search box and not allowing sorting

I have the following html code for table:
<table id="employeeDetails" class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
<th>Team</th>
</tr>
</thead>
</table>
And the following code for dataTable initialization:
$('#employeeDetailsTable').dataTable({
"processing":true,
"ajax" : {
"url" : '/fetchSearchResults',
"type" : 'POST'
}
}
});
I read in many places on the internet that sorting feature and search box in datatable is not provided if colspan is used. Even after not using colspan I'm not getting these features in my datatable. What can be the possible reason for this?

How to hide/display rows in datatables?

I am trying to hide/display certain rows based on data from a hidden column. my table structure looks like:
<table id="agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
I am trying to hide/show records based on the Status column, using a checkbox. If the status == DEREGISTERED I want to exclude it from the table (unchecked checkbox).
I adapted my code from what was done here:
$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
// does not run this
console.log("GOTHRERE");
if ('agent_search' == oSettings.nTable.id) {
// console.dir(oSettings);
console.dir(aData);
var dereg = aData[5];
console.log(dereg);
if (dereg == "DEACTIVATED"){
return $('#toggle_deregistred').is(':checked');
} else {
return $('#toggle_deregistred').is(':not:checked');
}
}
return true;
});
I have tried using $.fn.dataTableExt.afnFiltering witch is used for custom filtering, only to find that I can not do it. It was once possible in previous versions of dataTables as in this case , but as it turns out it was a bug that allowed it to be possible :|.
Is there a way that I can filter out rows based on if their Status with the use of a checkbox? or is there something in the api I can use that I have over looked?
UPDATE:
I have made a jsfiddle in which it is working, how ever in the process of adapting my code to put it in jsfiddle, I noticed that it is bServerSide that is causing the $.fn.dataTableExt.afnFiltering not to work. Is there a work around or another way to user Server-side processing?

I found an alternate way to the checkbox of hiding/displaying.
I use Bootstrap 3 tabs to apply different filters:
<ul class="nav nav-tabs form-tabs" id="search-tabs">
<li id="basic-list" class="active"><a data-toggle="tab" data-dtname="all" href="#all">All</a></li>
<li class="" id="dereg-list"> <a data-toggle="tab" data-dtname="dereg" href="#dereg">Deregistered</a></li>
</ul>
<br>
<div class="tab-content">
<fieldset id="all" class="tab-pane active">
<table id="agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
</fieldset>
<fieldset id="dereg" class="tab-pane ">
<table id="dereg_agent_search" cellpadding="0" cellspacing="0" border="0" class="table table-striped">
<thead>
<th>Agent ID</th>
<th>Agent Name</th>
<th>ID Number</th>
<th>Mobile Number</th>
<th>Team Name</th>
<th>Status</th>
<th></th>
</thead>
</table>
</fieldset>
</div>
I first initialize the table on the first tab all which uses bServerSide=true and for the other table(when I switch to the other tab) I do:
$('#search-tabs a').click(function(e) {
e.preventDefault();
$(this).tab('show');
if (this.dataset["dtname"] == "all") {
oTable.fnDraw();
} else if (this.dataset["dtname"] == "dereg") {
var data = $("form").serialize();
$.post(
url, data
).success(function(data){
console.log(data.aaData);
kTable = $('#dereg_agent_search').dataTable( {
"sScrollY": "250px",
"data": data.aaData,
"destroy" : true,
"sDom": "<'row'<'col-sm-6'><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'>>S",
"aoColumnDefs": [
{
"bSortable": false,
"aTargets": [ 6 ],
"sWidth":"150px",
"mRender": function( data, type, full ){
return "<div class='btn-group'><a href="+full[6][0]+" class='btn btn-default btn-sm'>View</a><a href="+full[6][1]+" class='btn btn-default btn-sm'>Edit</a></div>"
}
},
{
"bSortable": true,
"aTargets": [ 0 ],
"sWidth":"150px",
"mRender": function( data, type, full ){
if (full[5] == "DEACTIVATED"){
return "<a href="+full[6][0]+" class='DEACTIVATED'>"+data+"</a>"
} else{
return ""+data+""
}
}
},
{"aTargets": [ 4 ], "sWidth":"250px" },
{"aTargets": [ 5 ], "bVisible":false},
],
"bDeferRender": true,
"bStateSave": true
} );
});
kTable.fnDraw();
}
});
Notice that I get the data to populate the table from the server - using a jQuery $.post request, and then I use datatables' data attribute to populate the table.
I hope This can Help someone.