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

2023-12-19

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

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

如果处理表的人需要从记录 200 到 300 进行处理,并且为了方便起见,他需要在一页中看到 10 条记录,那么他可以单击页码上的 5,然后单击 6,然后单击 7一直到第 20 页。(我知道解决方法是显示 100 条记录,只需单击第 3 页即可从 200 条开始,但是正如我提到的,由于他们的工作,他们更容易看到不超过 10 条记录每页 -20 条记录)。

下图显示,一旦到达第 5 页,我就无法转到除第一页、最后一页、下一页或上一页以外的其他页面

有什么设置可以显示所有页面吗?

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

'sPaginationType' : 'full_numbers',

EDIT:

    <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) {
.....

PROBLEM

最新版本的DataTables 1.10.7默认不具备此功能。

分页插件 http://datatables.net/plug-ins/pagination/提供附加功能。其中之一,Ellipses http://datatables.net/plug-ins/pagination/ellipses, has iShowPages允许定义在分页控件中显示的页面数的选项。

然而每@davidkonrad 的笔记 https://stackoverflow.com/questions/30633288/displaying-all-pages-from-the-pagination-of-a-datatable/30633820#comment49350727_30633820, Ellipses 插件不完全支持 DataTables 1.10,即不显示当前选定的页面和某些按钮的禁用状态。

SOLUTION

See 这个答案 https://stackoverflow.com/a/30850489/3549014 or jQuery DataTables – 没有省略号的分页 https://www.gyrocode.com/articles/jquery-datatables-pagination-without-ellipses/以获得更好的解决方案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在数据表的分页控件中显示不带省略号的页面 的相关文章

随机推荐