DataTables Deferred Loading with WordPress content using templates

tdevine33

I have a table using DataTables.js for a table of custom post types from WordPress with several hundred entries. I am trying to use deferLoading in order to load in the content with AJAX, but have been running into multiple errors.

I have been using this tutorial as a reference. The endpoint seems to be set up properly, because I am able to do a basic AJAX call to it and return the object

    var data;
        $.ajax({
            url: ajax_object.ajax_url + '?action=datatables_endpoint',
        }).done(function(data) {
            console.log(data);
        });

...but when I get to 4. Set up the DataTable it does not load any of the data object into the DataTable.

var grantDT = $('#grantsList').DataTable({
    serverSide: true,
    processing: true,
    ajax: {
        url: ajax_object.ajax_url + '?action=datatables_endpoint',
        dataSrc: 'data'
    },
    deferLoading: $('#grantsList').data('count'),
    columns: [
        { data: 'ID' },  
        { data: 'post_title' },
    ],

    pageLength: 30,
    lengthMenu: [[30, 60, 90, -1], [30, 60, 90, "All"]],
});

The other issue I have with this method is the <tr></tr> for each of these rows has custom markup (checkbox to "favorite", etc) as well uses several advanced custom fields that aren't included in the endpoint that I've created.

Is there a way to run deferLoading with php templates being used to add the rows / content to the DataTable? Am I thinking about this the wrong way? Thanks for any help!

kthorngren

am trying to use deferLoading in order to load in the content with AJAX, but have been running into multiple errors.

What are the errors?

Set up the DataTable it does not load any of the data object into the DataTable.

The deferLoading stops Datatables from initially loading table data until something causes Datatables to perform a draw(). Something like sorting, searching or paging the table or using draw(). Use the browser's network inspector and you will see there is no ajax request when Datatables initializes.

The other issue I have with this method is the <tr></tr> for each of these rows has custom markup (checkbox to "favorite", etc) as well uses several advanced custom fields that aren't included in the endpoint that I've created.

These will be overwritten. You can use columns.render to render checkboxes, etc. See this example.

You can have a DOM sourced table or you can have an ajax loaded table but there is not an option to combine the two in one table. With deferLoading you can start with a DOM sourced table but once a draw event occurs it will be overwritten. See this example:
http://live.datatables.net/piwuciwu/1/edit

It loads the table form the DOM. Try a search or sort and you will see the ajax request to the server and the DOM table is overwritten.

Kevin