jQuery DataTable 选项显示“1 of x pages”答案

【问题标题】：jQuery DataTable option to show "1 of x pages "jQuery DataTable 选项显示“1 of x pages”
【发布时间】：2013-11-01 22:08:44
【问题描述】：

我正在使用 jQuery dataTables 来显示数据网格，我正在寻找一个选项，通过它我可以在表格下方显示“1 of x pages”，但找不到这样的选项，请帮忙！

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

【问题讨论】：

你能显示代码你是如何初始化数据表的吗？
我已经编辑了问题，请看@ManojMonga

标签： jquery ruby-on-rails jquery-datatables

【解决方案1】：

显示信息的选项是 bInfo，您已将其设置为 false。因此，您需要删除或将其设置为 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

编辑

据我所知，没有这样的功能可以更改信息块的文本以显示页数而不是条目数。但是，我们仍然可以通过为 info 添加回调函数来实现这一点，就像我在上面的代码中添加了 fnInfoCallback 一样。这将获得每个页面更改的开始、结束、最大和总条目数，因此我们可以计算当前页面和总页面。并在信息块中显示所需的文字。

【讨论】：

但它显示的是 x 个条目中的 1 个，而不是 x 页中的 1 个，有什么线索吗？

【解决方案2】：

我刚刚遇到这个并找到了一个更好的解决方案...上面的解决方案对我有用，但是当表格在最后一页上有不同数量的记录时，它有时会显示错误的页码...

这是一个更好，更准确的...

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

【讨论】：