Callback function every time new data is completely loaded.
Callback function every time new data is completely loaded.
nkeiter
Posts: 4Questions: 1Answers: 0
Using datatables-1.10.16
I have a group of DataTables, each in their own tab navigator. I have the need to add a row count to the header of each tab navigator. I am using ajax urls to load the data, and the data is often refreshed after a user action. Depending on the user action, multiple datatables may be refreshed at the same time on other tabs in the background. All the effected counts need to be updated on refresh.
Pending Tickets (5) | Current Tickets (10) | Tickets Not Closed (4) for example.
I've tried the initComplete callback and that works well. But it only works ONCE. I need something that will work similarly, but after every time the data is refreshed and all internal operations are completed. The counts need to be updated after every reload.
I tried the drawCallback callback, but that seems to be called too early. When trying to access the table data I get the error "TypeError: table.rows is not a function". I don't think the table is drawn yet at this point or perhaps the rows haven't been added yet.
Snippets:
The old way, that worked, but only ONCE on page load. (From my DataTables initial options on UnscheduledRequestsTabScript.js)
"initComplete": function( settings, json ) {
transportationAdministrator.unscheduledRequestsTabScript.updateCount();
}
The new way that doesn't work. (From my DataTables initial options on UnscheduledRequestsTabScript.js)
"drawCallback": function( settings ) {
transportationAdministrator.unscheduledRequestsTabScript.updateCount();
}
(From my UnscheduledRequestsTabScript.js)
updateCount: function()
{
var unscheduledRequestsData = transportationAdministrator.dataTablesHelper.getData( transportationAdministrator.unscheduledRequestsTabScript.unscheduledRequestsTable );
$( "a[href='#unscheduledRequestsTab']" ).html( "Unscheduled Requests (" + unscheduledRequestsData.length + ")");
}
(From my DataTablesHelper.js)
getData: function( table )
{
var data = [];
if ( table )
{
var rows = table.rows();
data = rows.data();
}
else
{
console.log( this.IDENTITY + " -> getData() table undefined " + table );
}
return data;
},
End Goal: https://drive.google.com/open?id=16uqj9Cs8rBKVpVs8os9-fILBOl_-FutB (This is using initComplete, so the counts are not updating..)
This question has accepted answers - jump to:
Answers
Unrelated to my initial question, but also my date/time columns are sorting alphabetically. I have moment.js loaded as suggested... From what I've read the type detection should be automatic?
You will want to use
drawCallback.drawCallbackdoes execute beforeinitCompletebut it also runs each time the table is drawn. The problem is that the variabletransportationAdministrator.unscheduledRequestsTabScript.unscheduledRequestsTableis not assigned the Datatables API until after theinitCompletereturns.I think what you need to do is in the
updateCount()function pass the DataTables API togetData()instead of the variabletransportationAdministrator.unscheduledRequestsTabScript.unscheduledRequestsTable. In other words pass something like$('#myTable').DataTable().Kevin
Did you follow the steps in this blog?
https://datatables.net/blog/2014-12-18
Make sure you are also loading the plugin (datetime-moment.js) and that your date time format is correct for this:
$.fn.dataTable.moment( 'HH:mm MMM D, YY' );If this doesn't help please post your JS code with the format and an example of your date-time.
Kevin
Yes Kevin, thank you for your help. It was indeed an issue with the variable not being set yet at the time of the "drawCallback", however it is set at the time of the "initComplete" callback. I am tracking if the table is initialized in a different variable. So calling my function on both callbacks and verifying the table is initialized solved the problem.
The variable collects the result of the constructor:
So I added my function to both callbacks:
Then in the function I check if the DataTable is initialized.
This works!
Hi Kevin apparently I missed some steps from this blog:
https://datatables.net/blog/2014-12-18
My date sorting is working now. Thanks for the hint.