javascript-在数据表的分页控件中显示没有省略号的页面

2019-11-20 07:38:38 阅读：304 来源： 互联网

标签：twitter-bootstrap pagination datatables javascript jquery

我在Bootstrap中使用jQuery Datatables JS,但遇到了一个解决方法,但这不是最好的解决方法.

问题：我的表包含超过4k条记录

如果在桌子上工作的人需要工作在200条记录到300条记录之间并且为了方便起见,他需要在一个页面中查看10条记录,那么他可以在页码上单击5,然后单击6,然后单击7.一直到第20页.(我知道解决方法是显示100条记录,然后单击第3页从200开始,但是正如我提到的那样,由于他们的工作,他们看到不超过10条记录比较容易每页-20条记录).

下图显示,当我到达第5页时,除了第一页,最后一页,下一页或上一页之外,我无法再浏览其他页面

有什么设置可以显示所有页面吗？

该表是在服务器端处理的,我添加了以下选项：

'sPaginationType' : 'full_numbers',

编辑：

    <link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//cdn.datatables.net/tabletools/2.2.2/css/dataTables.tableTools.css" rel="stylesheet" type="text/css"  />
    <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"  />
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script> 
    <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/ellipses.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.7/pagination/select.js"></script>

j$(document).ready(function() {
    j$('#sharkTankTable').dataTable({
        'aoColumns': aoColumns,
        'sPaginationType': 'listbox',
        // 'pageLength': 10,
        // // 'sPaginationType': 'ellipses',
        // 'iShowPages': 10,
        'bProcessing': true,
        'bServerSide': true,
        // 'sPaginationType' : 'full_numbers',
        'sDom': 'T<"clear">lfrtip',
        'bFilter': true,
        'tableTools':{"sSwfPath": "//cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls_pdf.swf"},
        'sAjaxSource': 'fakeUrl',
        'fnServerData': function(sSource, aoData, fnCallback) {
.....

解决方法:

问题

默认情况下,最新版本的DataTables 1.10.7不具有此功能.

有pagination plug-ins提供其他功能.其中之一是Ellipses,具有iShowPages选项,该选项允许定义要在分页控件中显示的页面数.

但是,对于@davidkonrad’s note,Ellipses插件不完全支持DataTables 1.10,即不显示当前选择的页面以及某些按钮的禁用状态.

解

有关更好的解决方案,请参见this answer或jQuery DataTables – Pagination without ellipses.

标签：twitter-bootstrap,pagination,datatables,javascript,jquery
来源： https://codeday.me/bug/20191120/2042245.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在数据表的分页控件中显示没有省略号的页面