Callback function every time new data is completely loaded.

nkeiter

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..)

nkeiter

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?

kthorngren

You will want to use drawCallback. drawCallback does execute before initComplete but it also runs each time the table is drawn. The problem is that the variable transportationAdministrator.unscheduledRequestsTabScript.unscheduledRequestsTable is not assigned the Datatables API until after the initComplete returns.

I think what you need to do is in the updateCount() function pass the DataTables API to getData() instead of the variable transportationAdministrator.unscheduledRequestsTabScript.unscheduledRequestsTable. In other words pass something like $('#myTable').DataTable().

Kevin

kthorngren

my date/time columns are sorting alphabetically.

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

nkeiter

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:

if ( !this.unscheduledRequestsDataTableInitialized )
{
    // Build Un-Scheduled Requests DataTable
    this.unscheduledRequestsTable = $( "#unscheduledRequestsTable" ).DataTable( {
        "ajax": unscheduledRequestsURL,
        "dom": "Bfrtilp",
        "processing": true,
...

So I added my function to both callbacks:

"initComplete": function( settings, json ) {
    transportationAdministrator.unscheduledRequestsTabScript.updateCount();
},
"drawCallback": function( settings ) {
    transportationAdministrator.unscheduledRequestsTabScript.updateCount();
}

Then in the function I check if the DataTable is initialized.

updateCount: function()
{
    if ( transportationAdministrator.unscheduledRequestsTabScript.unscheduledRequestsDataTableInitialized )
    {
        var unscheduledRequestsData = transportationAdministrator.dataTablesHelper.getData( transportationAdministrator.unscheduledRequestsTabScript.unscheduledRequestsTable );

        $( "a[href='#unscheduledRequestsTab']" ).html( "Unscheduled Requests (" + unscheduledRequestsData.length + ")");
    }
}

This works!

nkeiter

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.