Here is a quick snippet for custom AJAX data for Jquery datatables :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var table = $(‘#table-index’).dataTable({ "serverSide": true, "searching": false, "ordering": false, "sAjaxSource": url, "bStateSave": true, "fnStateSave": function (oSettings, oData) { localStorage.setItem( ‘DataTables’, JSON.stringify(oData) ); }, "fnStateLoad": function (oSettings) { return JSON.parse( localStorage.getItem(‘DataTables’) ); }, "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) { oSettings.jqXHR = $.ajax( { "url": sSource, "data": {‘page’: Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1}, "success": fnCallback, "error": function (e) { console.log(e.message); } }); }, "columns": [ { "data": "name" }, { "data": "gender" }, { "data": "location" }, { data: null, className: "center", defaultContent: ‘<a href="#" class="edit_data"><i class="fa fa-pencil"></i> Edit</a> | <a href="" class="remove_data"><i class="fa fa-trash"></i> Remove</a>’ } ], }); |
For pagination, the key is :
1 | "data": {‘page’: Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1}, |