This is how I initially load my empty dataTable on page load. Then I load it with data via ajax using an eventListener. I couldn't find any documentation I just kind of played around with it and it works like a charm.
ref files - dataTables.js, table-advanced.js
$(document).ready(function(){
option = "I";
// pick a table list or something
$("#dropdownList").on("change", function(){
option = $('option:selected:not(:disabled)',this).val();
if($.fn.DataTable.isDataTable('#table_001')){
$('#table_001').dataTable().fnDestroy();
InitDataTable(option);
}
else{
InitDataTable("disabled");
}
});
//add/delete/update a row maybe?
$("#signupForm #add_btn").on("click",function(e){
if($("#signupForm").valid()){
var oTable1 = $('#table_001').DataTable(); ///load .ajax structure
//Successful Submit!
oTable1.ajax.reload();
$("#note").html(<img src="/images/loading.gif" alt="loading">');
}
});
//On draw occurs everytime you call table.ajax.reload();
$('#table_001').on( 'draw.dt', function () {
if(option !== "I")
var evtname = $('select[name="EVENT"] option:selected:not(:disabled)').text();
if(evtname !== undefined)
$("#event_name").html("The " + evtname + " Signup Sheet").addClass("xs-small");
// keep track of values for table input fields on each draw
$("[aria-controls='table_001'][type='search']").attr('hth_orig',$(" [aria-controls='table_001'][type='search']").val());
//Don't initialize on draw
TableAdvanced.init('table_001','N');
});
var InitDataTable = function(choice){
var oTable1 = $('#table_001').dataTable( {
"processing": true,
"serverSide": true,
"lengthMenu": [10,25,50,100], // records pulldown
"iDisplayLength": 25, // # records to initially display
"ajax": {
"url": "http://www.domain.com",
"data": function (d) { // pass additional
d.user = user;
d.choice = choice;
d.cols = "15"; // TOTAL <td> tags per <tr> tag
},
// Load attendee total and pending total sections
complete: function (d) {
recordstotal = d.responseJSON.recordsTotal;
attendeetotal = d.responseJSON.attendeeTotal;
//console.log(JSON.stringify(d.responseJSON.data));
if ( attendeetotal == '0') {
$("#totalAttendees").html("No one has signed up for this event yet");
}
else {
$("#totalAttendees").html("Event Total: " + attendeetotal + " attendees");
}
$("#add-atn").removeClass("hidden");
}
},
// insert code to execute after table has been redrawn
"fnDrawCallback": function( oSettings ) {
// Column filtering
var table = $('#table_001').DataTable();
$("#table_001 tfoot th").each( function ( i ) { // i = 0,1...
if($.trim($(this).html()) != '') {
save_html = $(this).html();
$(this).empty();
var select = $(save_html)
.appendTo( this )
.on( 'change', function () {
table.column( i, { filter: 'applied' }).search($(this).val()).draw();
});
$("#table_001 tfoot th:eq("+i+") input").val(save_value);
}
});
//console.log($("#table_001 tfoot th").length);
},
"columns": [// set "data" to next sequential number in double quotes
{"data":"0",// Set "name" to field name that will be refd
"name": "skip"},
{"data":"1",
"name": "skip"},
{"data": "2",
"name": "skip"},
{"data":"3",
"name": "lname"},
{"data":"4",
"name": "fname"}
{"data":"5",
"name": "skip"}
],
"columnDefs": [
// what columns should be hidden?
{
"targets": [1], // what element starting with 0
"class":"hidden" // class to attach to <td>
},
// what columns should NOT be sortable?
{
"targets": [0,1,2,5,6,7,8,9,12,13,14],
"sortable": false, // sortable?
},
// what columns should NOT be searchable?
{
"targets": [0,1,2,6,7,8,9,12,13,14],
"searchable": false, // searchable?
}
],
"createdRow": function( row, data, dataIndex ) {
//manipulate the specific column in the row
//$(row).addClass( 'form-group' );
// $('td', row).eq(2).addClass('form-group'); // Added to <td>
},
// Specify initial sort order
"order": [[ '10', "desc" ],[ '11', "desc" ],['3',"asc"],['4',"asc"]]
});
// handle 1st page table load initialization using
TableAdvanced.init('table_001','Y');
});
}
NOTE: You could add some logic that selects a default option if there is one that is available and not disabled.
