如何清除Jquery DataTable中的省略号分页？ [英] How to remove ellipsis in Jquery DataTables pagination?
问题描述
首先， 4,5，...，45，Next，Last
现在，当我点击第5页按钮时，分页以这种方式显示按钮：
首先，上一个，1，...，4,5,6，...，45，Next，Last
我不想要那些省略号，我想要的是当用户点击第5页时，我想显示接下来的3页以及前一页如下：
首先，上一个，4,5,6,7,8，下一个，最后
所以最终我要删除椭圆，并显示以前格式的页面编号，当前页码和下一页数：
首先，上一页{{上一页}，{当前页面}，{next 3 pages}，Next，Last
有没有办法在DataTables中实现？
问题
最新版本的DataTables 1.10.7默认情况下不具备此功能。
分页插件提供额外的功能，但不幸的是没有人提供此功能。
解决方案
我们创建了分页插件全数字 - 无椭圆和简单数字 - 无椭圆来克服此问题，并显示无省略号的分页控件。
-
全数 - 无椭圆插件与分页选项
'pagingType'：'full_numbers'类似，但不包括省略号。 -
简单数字 - 无椭圆插件的行为类似于分页选项
'pagingType'：'simple_numbers'，但不包括省略号。
DEMO
请参阅全数字示例 - 无椭圆插件用于演示和下载两个插件。
如何使用
使用简单数字 - 无椭圆插件：
- 下载 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 / javascriptsrc =// code.jquery。 com / jquery-1.11.1.min.js>< / script>
< script type =text / javascriptsrc =// cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js\"></script>
< link rel =stylesheettype =text / csshref =// cdn.datatables.net/1.10.7/css/jquery.dataTables.css\">
< script type =text / javascriptsrc =full_numbers_no_ellipses.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃example'）。DataTable（{
'pagingType'：'full_numbers_no_ellipses'
}）;
}）;
< / script>
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:
First,Last,1,2,3,4,5,...,45,Next,Last
Now when I click on 5th page button, pagination shows buttons this way:
First,Previous,1,...,4,5,6,...,45,Next,Last
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:
First,Previous,4,5,6,7,8,Next,Last
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
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.
SOLUTION
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.
"Full Numbers – No Ellipses" plug-in behaves similarly to pagination option
'pagingType': 'full_numbers'but excludes ellipses."Simple Numbers – No Ellipses" plug-in behaves similarly to pagination option
'pagingType': 'simple_numbers'but excludes ellipses also.
DEMO
See example of Full Numbers – No Ellipses plug-in for demonstration and to download both plug-ins.
HOW TO USE
To use "Simple Numbers – No Ellipses" plug-in:
- 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:
- download full_numbers_no_ellipses.js
- include it after
jquery.dataTables.min.js - use
'pagingType': 'full_numbers_no_ellipses'initialization option.
For example:
<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 DataTable中的省略号分页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
