CODEWITHSUNDEEP
jqueryruby-on-railsdatatables
Rajdeep Singh
Rajdeep Singh

Reputation: 17834

jQuery DataTable option to show "1 of x pages "

I'm using jQuery dataTables to show the datagrid, I'm searching for an option through which I could display "1 of x pages " below the table but couldn't find such option, please help!

var initialize = function(){

    // method call to display data grid for investors
    displayInvestorGrid();
};
var displayInvestorGrid = function(){

    // initialize investor's grid
    var grid = investorGrid.dataTable({
        "oLanguage": {
            "sZeroRecords": "No records to display"
        },
        "iDisplayLength": 10,
        "bSort": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bLengthChange": false,
        "bFilter": true,
        "bInfo": false,
        "aoColumns": [ null, null, null, null, null ,null, {
            "bSortable": false,
            "bSearchable": false
        },

        {
            "bSortable": false,
            "bSearchable": false
        },{
            "bSortable": false,
            "bSearchable": false
        }
        ]

    });        
    // calling append method to append drop down
    $('#investors_filter').append("<div id='select-div'>Select Status:"+fnCreateSelect()+"</div>");

    // filter result on change of select box value
    $('#select-div select').change( function () {
        grid.fnFilter( $(this).val(), 4 );
    } );

}; // end method displayInvestorGrid

Upvotes: 2

Views: 3182

Answers (2)

nodeffect
nodeffect

Reputation: 1840

I just came across this and found a better solution... The solution above works for me but it shows the wrong page number sometimes when the table has different number of records on the last page...

This is a better and more accurate one...

"fnInfoCallback": function ( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
                 var o = this.fnPagingInfo();
                 return "Page "+(o.iPage+1)+" of "+o.iTotalPages;
    }

This is for more info: http://datatables.net/plug-ins/api#fnPagingInfo

Upvotes: 2

Manoj Monga
Manoj Monga

Reputation: 3083

The option for showing the information is bInfo that you have set to false. So you need to either remove or set it to true.

var displayInvestorGrid = function(){

// initialize investor's grid
var grid = investorGrid.dataTable({
    "oLanguage": {
        "sZeroRecords": "No records to display"
    },
    "iDisplayLength": 10,
    "bSort": true,
    "bPaginate": true,
    "sPaginationType": "full_numbers",
    "bLengthChange": false,
    "bFilter": true,
    "bInfo": true,
    "aoColumns": [ null, null, null, null, null ,null, {
        "bSortable": false,
        "bSearchable": false
    },

    {
        "bSortable": false,
        "bSearchable": false
    },{
        "bSortable": false,
        "bSearchable": false
    }
    ],

    "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
       perPage = iEnd - iStart + 1;
       totalRatio = iTotal/perPage;
       intTotalRatio = parseInt(totalRatio, 10);
       totalPages = totalRatio > intTotalRatio ? intTotalRatio + 1 : intTotalRatio;
       currentRatio = iStart/perPage;
       intCurrentRatio = parseInt(currentRatio, 10);
       currentPage = currentRatio > intCurrentRatio ? intCurrentRatio + 1 : intCurrentRatio;
       return 'Displaying ' + currentPage + ' of ' + totalPages + ' pages';
    }
});        
// calling append method to append drop down
$('#investors_filter').append("<div id='select-div'>Select Status:"+fnCreateSelect()+"</div>");

// filter result on change of select box value
$('#select-div select').change( function () {
    grid.fnFilter( $(this).val(), 4 );
} );

}; // end method displayInvestorGrid

Edit

As per my knowledge, there is no such function to change the text of the information block to show the page count instead of entry count. But, still we can achieve this by adding a callback function for info as I added fnInfoCallback in above code. This will get the start, end, max and total number of entries for each page change so we can calculate the current and total pages. And display the required text in the information block.

Upvotes: 4

Related Questions