Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery dataTables page info

Tags:

datatables

Reference: http://datatables.net/reference/api/page.info()

I am trying to acquire the current pagination information for an ajax POST generated jQuery DataTable.

Using provided function .page.info(), it is returning with all zeros for pages and page, even though the Table has multiple pages.

My goal is to provide pagination info next to Pagination type "simple",

Page [Current Page Number] of [Total Page Count] [<|>].

This is the resulting output:

Object {
    end: 0
    length: 10
    page: 0
    pages: 0
    recordsDisplay: 0
    recordsTotal: 0
    start: 0
}

And this is the jQuery DataTable code:

var oSegmentsDatatable = $('table#segments-datatable').DataTable({
    ajax: {
        type: "POST",
        url: urlSegmentsDatatable,
        data: {'advertiser_id':<?=$advertiser_id?>},
        error: function (jqXHR, textStatus, errorThrown) {

        }
    sDom: 'p<"H"f>t<"F"lr>',
    bProcessing: false,
    bServerSide: true,
    responsive: true,
    bFilter:  true,
    sPaginationType: "simple",
    aaSorting: [[8,'desc']],
    bAutoWidth: false,
    aoColumns : [
        { 'sWidth': '25%' }, // 0
        { 'sWidth': '3%' }, // 1
        { 'sWidth': '3%' }, // 2
        { 'sWidth': '3%' }, // 3
        { 'sWidth': '3%' }, // 4
        { 'sWidth': '5%' }, // 5
        { 'sWidth': '5%' }, // 6
        { 'sWidth': '5%' }, // 7
        { 'sWidth': '10%' } // 8
    ],

    columnDefs: [{
        targets: "no-sort",
        orderable: false
    }]
});

var info = oSegmentsDatatable.page.info();
console.log(info);
like image 409
Jeff Tanner Avatar asked Jan 19 '26 04:01

Jeff Tanner


1 Answers

Classic javascript asynchronicity issue. Your

var info = oSegmentsDatatable.page.info();

is executed before AJAX has finished its business. You would be better of doing this in the drawCallback callback :

function processInfo(info) {
    console.log(info);
    //do your stuff here
}    

var table = $('#example').DataTable({
   //other initialisation options
   drawCallback : function() {
       processInfo(this.api().page.info());
   }
});

You could also hook into the page.dt event, but then you have to do something on first initialisation. page.dt is only triggered when the user click on a new page or the page is changed programmatically.

like image 70
davidkonrad Avatar answered Jan 20 '26 18:01

davidkonrad