如何删除Jquery DataTables分页中的省略号？

Question

我在网格中使用Jquery (Datatables.net)。假设我的网格中总共有45页，因此目前默认分页，其中“full_numbers”显示以下按钮：

首先，最后，1，2，3，4，5，...,45，下一步，最后

现在，当我单击第5页按钮时，分页显示按钮的方式如下：

第一，前一，1，...,4,5,6，...,45，下一步，最后

我不想要那些省略号，我想要的是当用户点击第5页时，我想显示接下来的3页和前面的1页，如下所示：

第一，前，4，5，6，7，8，其次，最后

因此，我最终希望删除省略号，并以这种格式显示以前的页码、当前的页码和下一个n个页码：

第一，前一页，{上一页}，{当前页}，{下三页}，下一页，最后一页

有什么办法使DataTables成为可能吗？

Answer 1

问题

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

有一些分页插件提供了额外的功能，但不幸的是，它们都没有提供这种功能。

解决方案

我们已经创建了分页插件“完整的数字-没有椭圆”和“简单的数字-没有椭圆”来克服这个问题，并显示分页控制没有椭圆。

• “完整数字-没有省略号”插件的行为类似于分页选项'pagingType': 'full_numbers'，但不包括省略号。
• “简单数字-没有省略号”插件的行为类似于分页选项'pagingType': 'simple_numbers'，但不包括省略号。

演示

有关演示和下载这两个插件，请参见完整数字示例-没有省略号插件。

如何使用

使用“简单数字-无省略号”插件：

• 下载ellipses.js
• 将其包含在jquery.dataTables.min.js之后
• 使用'pagingType': 'simple_numbers_no_ellipses'初始化选项。

使用“完整数字-无省略号”插件：

• 下载ellipses.js
• 将其包含在jquery.dataTables.min.js之后
• 使用'pagingType': 'full_numbers_no_ellipses'初始化选项。

例如：

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">

<script type="text/javascript" src="full_numbers_no_ellipses.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#example').DataTable( {
            'pagingType': 'full_numbers_no_ellipses'
        } );
    } );
</script>

Answer 2

您可以通过使用CSS轻松地修复它。

1. 在浏览器中右击“.”按钮，然后选择“检查”。图像描述
2. 复制按钮ID。(例如，我的按钮id是CallingID_ellipsis)。图像描述
3. 在“样式”中添加“显示:没有”。

#CallingID_ellipsis {
  display: none !important;
}