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

c9qzyr3d  于 2022-11-28  发布在  jQuery
关注(0)|答案(2)|浏览(137)

我在网格中使用Jquery DataTables(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页页码:

  • 第一页、上一页、{上一页}、{当前页}、{后3页}、下一页、最后一页 *

有没有办法在DataTables中实现这一点?

jexiocij

jexiocij1#

问题
默认情况下,DataTables 1.10.7的最新版本不具有此功能。
pagination plug-ins提供了附加功能,但遗憾的是,它们都不提供此功能。

溶液

我们创建了分页插件“Full Numbers - No Ellipses”和“Simple Numbers - No Ellipses”来解决这个问题,并显示不带省略号的分页控件。

  • “Full Numbers - No Ellipses”插件的行为类似于分页选项'pagingType': 'full_numbers',但不包括省略号。
  • “Simple Numbers - No Ellipses”插件的行为类似于分页选项'pagingType': 'simple_numbers',但也不包括省略号。

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

如何使用

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

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

  • 下载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>
js4nwp54

js4nwp542#

您可以使用CSS轻松地修复它。
1.在浏览器中右键单击“...”按钮,然后选择“检查”。image description here
1.复制按钮ID。(例如,我的按钮ID是“CallingID_ellipsis”)。image description here
1.添加“显示:没有”在你的“风格”。

呼叫ID_省略号{显示:无!重要;}

相关问题