Pagination not working when using ajax datatable

gdhanasekaran92

I have implemented the ajax datatable but I can't able to use pagination.

For example
I have totally 11 records.
Pagination size is 2
After some filtering process my "recordsFiltered" count is 6

But it Showing "1 to 2 of 2 entries (filtered from 11 total entries)"
In pagination I have only single page. It should be 3 pages.

I had attached my datatable config below

var dataTable = $('#role-datatable').DataTable({
         "columnDefs": [
            { 'title': 'id', "name": "id",   "targets": 0 },
            { 'title': 'Name', "name": "name",  "targets": 1 },
            { 'title': '', "name": "option",  'sortable' : false, "targets": 2 }
          ],
        "processing": true,
            "language": {
              "processing": "<span class='glyphicon glyphicon-refresh glyphicon-refresh-animate'></span>"
              },
            "serverSide": true,
            "ajax":{
                url :'<?php echo \Yii::$app->getUrlManager()->createUrl('role/role-grid-data') ?>', // json datasource
                type: "post",  // method  , by default get
                data: function ( d ) {
                    d._csrf = "<?= Yii::$app->request->getCsrfToken(); ?>";
                },
                dataFilter: function(data){
                    var json = jQuery.parseJSON( data );
                    console.log(json);
                    json.recordsTotal = json.recordsTotal;
                    json.recordsFiltered = json.recordsFiltered;
                    json.data = json.data;
         
                    return JSON.stringify( json ); // return JSON string
                }
            }
    });

      dataTable.columns().every( function () {
            var that = this;
            $( 'input, select, textarea', this.footer() ).on( 'keyup change', function () {
                console.log("this.value => ", this.value);
                if ( that.search() !== this.value ) {
                  var attr = $(this).attr('data-index');
                  if (typeof attr !== typeof undefined && attr !== false) {
                  // if ($(this).hasAttribute("data-index")) {
                    that
                        .column($(this).attr("data-index"), {search:'applied', order:'applied'})
                        .search( this.value )
                        .draw();
                  }
                }
            } );
        } );

Response I got from AJAX

{
   "draw":9,
   "recordsTotal":11,
   "recordsFiltered":6,
   "data":[
      [
         2,
         "test",
         "<a class=\"btn btn-info btn-xs\" href=\"\/teryag\/web\/index.php?r=sys-role%2Fupdate&amp;id=2\" style=\"margin-right: 4%;\"><i class=\"fa fa-pencil\"><\/i><\/a><a class=\"btn btn-danger btn-xs\" href=\"\/teryag\/web\/index.php?r=sys-role%2Fdelete&amp;id=2\" data-confirm=\"Do you want to delete this item?\" data-method=\"post\" data-params=\"2\"><i class=\"fa fa-trash-o\"><\/i><\/a>"
      ],
      [
         3,
         "test 3",
         "<a class=\"btn btn-info btn-xs\" href=\"\/teryag\/web\/index.php?r=sys-role%2Fupdate&amp;id=3\" style=\"margin-right: 4%;\"><i class=\"fa fa-pencil\"><\/i><\/a><a class=\"btn btn-danger btn-xs\" href=\"\/teryag\/web\/index.php?r=sys-role%2Fdelete&amp;id=3\" data-confirm=\"Do you want to delete this item?\" data-method=\"post\" data-params=\"3\"><i class=\"fa fa-trash-o\"><\/i><\/a>"
      ]
   ],
   .....
}

kthorngren

I tried a test case with your AJAX code and it seems to work:
http://live.datatables.net/kemametu/1/edit

Can you provide a link to you non-working page or update the test case to show the issue?

Kevin

bindrid

you have serverside set to true so it is up to you, in your result set to determine how many pages there are. This is done by setting the return values as described here https://datatables.net/manual/server-side

madzohan

It occurs because you set recordsFiltered to number of paginated items instead of only filtered ones (by search query). So you need count number of filtered items on server side and pass it to template in a context data.