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

Question

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

第一个、最后一个、1、2、3、4、5、...、45、下一个、最后一个

现在，当我点击第 5 页按钮时，分页以这种方式显示按钮：

第一,上一个,1,...,4,5,6,...,45,下一个,最后一个

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

第一,上一个,4,5,6,7,8,下一个,最后

所以最终我想删除省略号并以这种格式显示上一个页码、当前页码和下一个 n 页码：

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

有什么方法可以在 DataTables 中实现吗？

Answer 1

问题

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

有提供附加功能的分页插件，但遗憾的是它们都没有提供此功能。

解决方案

我们创建了分页插件“全数字-无椭圆”和“简单数字-无椭圆”来克服这个问题并显示无椭圆的分页控件。

• "Full Numbers – No Ellipses" 插件的行为类似于分页选项'pagingType': 'full_numbers'但不包括省略号。

• "Simple Numbers – No Ellipses" 插件的行为类似于分页选项'pagingType': 'simple_numbers'但'pagingType': 'simple_numbers'包括省略号。

演示

请参阅完整数字示例 - 无椭圆插件以进行演示和下载这两个插件。

如何使用

使用“Simple Numbers – No Ellipses”插件：

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

要使用“全数 – 无省略号”插件：

• 下载full_numbers_no_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. 在浏览器中右键单击“...”按钮，然后单击 select“检查”。 图片说明在这里

2. 复制按钮 ID。 （例如，我的按钮 ID 是CallingID_ellipsis ）。 图片说明在这里

3. 在您的“样式”中添加“显示：无”。

#CallingID_ellipsis {
  display: none !important;
}