如何删除 Jquery DataTables 分页中的省略号? [英] How to remove ellipsis in Jquery DataTables pagination?

问题描述

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

I am using Jquery DataTables(Datatables.net) with my grid. Suppose I have 45 pages in my grid in total hence currently default pagination with 'full_numbers' showing following buttons:

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

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

Now when I click on 5th page button, pagination shows buttons this way:

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

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

I don't want those ellipses, what I want is when user clicks on 5th page, I want to show next 3 pages along with 1 previous page like this:

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

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

So ultimately I want to remove ellipses and show previous page number, current page number and next n page numbers in this format:

First,Previous,{previous page},{current page},{next 3 pages},Next,Last

有什么办法可以在数据表中实现吗?

Is there any way to make it possible in DataTables?

推荐答案

PROBLEM

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

PROBLEM

Latest version of DataTables 1.10.7 does not have this ability by default.

有提供额外功能的分页插件，但遗憾的是没有提供此功能.

There are pagination plug-ins that provide additional functionality, but unfortunately none of them provide this functionality.

我们创建了分页插件全数字 - 无省略号"；和简单数字——没有省略号"克服这个问题，显示无省略号的分页控件.

We have created pagination plug-ins "Full Numbers – No Ellipses" and "Simple Numbers – No Ellipses" to overcome this problem and display pagination control without ellipses.

• 完整数字 - 无省略号"；插件的行为类似于分页选项 'pagingType': 'full_numbers' 但不包括省略号.

简单数字——没有省略号"；插件的行为类似于分页选项 'pagingType': 'simple_numbers' 但也不包括省略号.

"Simple Numbers – No Ellipses" plug-in behaves similarly to pagination option 'pagingType': 'simple_numbers' but excludes ellipses also.

参见完整数字示例——无椭圆插件 用于演示和下载两个插件.

See example of Full Numbers – No Ellipses plug-in for demonstration and to download both plug-ins.

使用简单数字 - 无省略号"插件:

To use "Simple Numbers – No Ellipses" plug-in:

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

• download simple_numbers_no_ellipses.js
• include it after jquery.dataTables.min.js
• use 'pagingType': 'simple_numbers_no_ellipses' initialization option.

使用全数 – 无省略号"插件:

To use "Full Numbers – No Ellipses" plug-in:

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

• download full_numbers_no_ellipses.js
• include it after jquery.dataTables.min.js
• use 'pagingType': 'full_numbers_no_ellipses' initialization option.

例如:

<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 分页中的省略号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！