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

Posted 2023-05-09

【中文标题】jQuery DataTable 选项显示“1 of x pages”

【英文标题】：jQuery DataTable option to show "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

【参考方案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;
    

更多信息：http://datatables.net/plug-ins/api#fnPagingInfo