Jquery Datatables modify fnserverData and pagination


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},

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.