2

我正在使用 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
4

2 回答 2

4

显示信息的选项是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

编辑

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

于 2013-10-23T17:19:19.883 回答
1

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

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

"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

于 2014-02-11T04:42:17.357 回答