jQuery DataTable 选项显示 "1 of x pages "

Question

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

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

Answer 1

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

编辑

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