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

【问题标题】：Displaying pages without ellipses in the pagination control of a datatable在数据表的分页控件中显示没有省略号的页面
【发布时间】：2015-06-04 00:59:27
【问题描述】：

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

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

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

下图显示，当我到达第 5 页后，除了第一页、最后一页、下一页或上一页之外，我无法进入其他页面

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

这个表是服务器端处理的，我加了选项：

'sPaginationType' : 'full_numbers',

编辑：

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap pagination datatables

【解决方案1】：

问题

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

pagination plug-ins 提供额外的功能。其中之一，Ellipses，具有iShowPages 选项，允许定义在分页控件中显示的页数。

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

解决方案

请参阅this answer 或jQuery DataTables – Pagination without ellipses 以获得更好的解决方案。

【讨论】：

我不想这么说 - 但省略号分页插件已被弃用。该功能现在由 dataTables 原生支持，并且省略号不适用于 1.10.x，因为您的小提琴显示（活动页面未突出显示，prev / next 按钮根本不起作用） - 但它是 dataTables 1.9 的一个很好的答案.x.
@davidkonrad，你是对的，但只是部分。虽然插件没有突出显示活动页面，但所有按钮都对我有用。我更新了 JSFiddle 以突出显示活动页面。插件仍然适用于 1.10，这就是它包含在 1.10 分支中的原因（请参阅帖子中的 CDN 链接，其中有 1.10.7），并且在插件部分的 DataTables 网站上列出，否则它将被删除。此外，OP 需要在椭圆之间显示超过 3 页，这是 DataTables 本身无法做到的，但 Ellipses 插件可以通过额外的选项iShowPages。
@Manza，您使用的是哪个版本的 DataTables？我的例子是基于 1.10 的，也许这就是问题所在。
嗨，非常感谢，我正在使用最新的：1.10.7 这很奇怪，因为我的表定义很长我意识到我有两次 'sPaginationType': 定义，但是，之后如果我离开 'sPaginationType': 'listbox' 则删除第二个，整个表格消失，控制台显示错误：在 jquery: TypeError: c is undefined f=a.aanFeatures;e||c.fnInit(a,b
@Manza，看看JSFiddle 的结构以及iShowPages 如何控制在分页控件中显示多少页。 sPaginationType 是旧 DataTables 1.9 的选项名称，但使用 DataTables 1.10 的代码应使用 pagingType。

【解决方案2】：

我之前遇到过这个问题，你可以在页面顶部使用css隐藏元素，就像这样：

 .ellipsis {
        display: none;
    }

【讨论】：