如何删除 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 页码：

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

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

Answer 1

问题

DataTables 1.10.7最新版本默认没有这个功能

pagination plug-ins 提供了额外的功能，但不幸的是 none 提供了此功能。

解决方案

我们创建了分页插件“全数字-无省略号”和“简单数字-无省略号”来解决这个问题并显示无省略号的分页控件。

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

演示

请参阅 example of Full Numbers – No Ellipses plug-in 进行演示并下载这两个插件。

如何使用

要使用“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>

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

How to remove ellipsis in Jquery DataTables pagination?

javascript

jquery

datatables

问题

解决方案

演示

如何使用