Jeff
Jeff

Reputation: 1879

jQuery dataTables page info

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);

Upvotes: 3

Views: 9189

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

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.

Upvotes: 5

Related Questions