Disable initial automatic ajax call - DataTable server side paging
You could use the deferLoading parameter and set it to 0. This will delay the loading of data until a filter, sorting action or draw/reload Ajax happens programmatically.
function initTestTable(){ myTable = $('#testTable').dataTable({ "processing": true, "serverSide": true, "deferLoading": 0, // here "ajax": { "url": "testTableData.html", "type": "GET", }, "columns": [ { "data": "code" }, { "data": "description" } ] });}To trigger the Ajax when the button is clicked you can have something like the following in the handler:
function buttonClickHandler(event){ $('#testTable').DataTable().draw();}See example below for demonstration.
I could do it with a workaround by passing an extra parameter with the URL to identify the event.
For example, for on load I initialized the data table with action="load" as query param and for other action like search, am passing action="search". With this I, at the back end, will be able to identify the call origin. If it is anything other than "load", I am pulling the data & passing (as the implementation is now). Otherwise (if "load") then I am passing empty data, which will show me "No Data Found" message as if it did not made the ajax call.
Here is my code - Table initialization:
function initTestTable(){ myTable = $('#testTable').dataTable({ "processing": true, "serverSide": true, "ajax": { "url": "testTableData.html?action=load", "type": "GET", }, "columns": [ { "data": "code" }, { "data": "description" } ] });}For events other than load (say button click):
var newUrl = 'testTableData.html?action=search'; myTable.api().ajax.url(newUrl).load();This was the one I had to take up without modifications to table init that would cause errors.
Thank you @JSelser and @davidkonrad for all your suggestions :)
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.