在数据表的分页控件中显示没有省略号的页面

时间:2015-06-04 00:59:28

标签: javascript jquery twitter-bootstrap pagination datatables

我正在使用带有Bootstrap的jQuery Datatables JS,我遇到了一个有解决方法的问题,但它并不是最好的。

问题:我的表包含超过4k的记录

如果在桌子上工作的人需要从记录200到300工作,并且为了方便,他需要在页面中看到10条记录,然后他可以点击页码上的5,然后点击6,然后在7,一直到第20页。(我知道工作将显示100条记录,只需点击第3页从200开始,但正如我提到的,由于他们的工作,他们更容易看到没有每页超过10-20条记录。)

下面的图片显示,一旦我到达第5页,我无法访问除第一页,最后一页,下一页或上一页之外的其他页面

有没有可以说显示所有页面的设置?

此表在服务器端处理,我添加了选项:

'sPaginationType' : 'full_numbers',

enter image description here

编辑:

    <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//cdn.datatables.net/tabletools/2.2.2/css/dataTables.tableTools.css" rel="stylesheet" type="text/css"  />
    <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"  />
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script> 
    <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/ellipses.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/select.js"></script>

j$(document).ready(function() {
    j$('#sharkTankTable').dataTable({
        'aoColumns': aoColumns,
        'sPaginationType': 'listbox',
        // 'pageLength': 10,
        // // 'sPaginationType': 'ellipses',
        // 'iShowPages': 10,
        'bProcessing': true,
        'bServerSide': true,
        // 'sPaginationType' : 'full_numbers',
        'sDom': 'T<"clear">lfrtip',
        'bFilter': true,
        'tableTools':{"sSwfPath": "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls_pdf.swf"},
        'sAjaxSource': 'fakeUrl',
        'fnServerData': function(sSource, aoData, fnCallback) {
.....

2 个答案:

答案 0 :(得分:3)

问题

默认情况下,最新版本的DataTables 1.10.7没有此功能。

pagination plug-ins提供其他功能。其中一个Ellipses具有iShowPages选项,允许定义要在分页控件中显示的页数。

但是根据@davidkonrad's note,Ellipses插件并不完全支持DataTables 1.10,即没有显示当前所选页面和某些按钮的禁用状态。

有关更好的解决方案,请参阅this answerjQuery DataTables – Pagination without ellipses

答案 1 :(得分:0)

之前我遇到过这个问题,您可以使用页面顶部的css隐藏元素,就像这样:

 .ellipsis {
        display: none;
    }