【问题标题】:how to remove pagination in datatable如何删除数据表中的分页
【发布时间】:2013-07-23 20:29:52
【问题描述】:

我是 jQuery 新手。我在网格中使用过数据表,但不需要分页。

在一页中有一个订单列表,我在数据表网格中显示它们,但在底部我不想显示分页。 有没有办法通过对 jQuery 库进行一些自定义来从数据表中删除或隐藏分页。

我尝试自定义它,但我发现很少有方法可以做到这一点..

提前致谢。

【问题讨论】:

  • 您使用的是哪种方法或插件?

标签: jquery html pagination datatables


【解决方案1】:

您应该在传递给构造函数参数的配置对象中包含"bPaginate": false,。如此处所示:http://datatables.net/release-datatables/examples/basic_init/filter_only.html

【讨论】:

  • 如果我只想显示数据的前 100 行,bPaginate 不起作用,因为无论 iDisplayLength 参数如何,它都会显示所有数据。你知道如何避免吗?
  • 如果我错了,请纠正我,但如果您只显示前 100 个项目并禁用分页,则用户无法显示以下结果。如果是这样,那么您应该尝试直接更改您的datasource。这似乎是一个不同的问题,因此您应该考虑提出一个新问题并向我们提供您的一些代码。
  • 其实是一个搜索功能,我还需要显示一条消息说用户需要更改她的搜索条件,因为检索到的行太多。作为记录,我在 Datatables 论坛上询问,解决方案是添加一个选项:sDom = lfrt(没有“p”,表示没有分页)。可能有用...
【解决方案2】:

禁用分页

对于数据表 1.9

使用bPaginate 选项禁用分页。

$('#example').dataTable({
    "bPaginate": false
});

对于数据表 1.10+

使用paging 选项禁用分页。

$('#example').dataTable({
    "paging": false
});

有关代码和演示,请参阅this jsFiddle

移除分页控制并启用分页

对于数据表 1.9

使用sDom 选项配置页面上显示的控件元素。

$('#example').dataTable({
    "sDom": "lfrti"
});

对于数据表 1.10+

使用dom 选项配置页面上显示的控件元素。

$('#example').dataTable({
    "dom": "lfrti"
});

有关代码和演示,请参阅 this jsFiddle

【讨论】:

  • 对于 1.10+,在表格元素上指定 data-paging='false' 也可以。
【解决方案3】:

它正在工作

试试下面的代码

$('#example').dataTable({
    "bProcessing": true,
    "sAutoWidth": false,
    "bDestroy":true,
    "sPaginationType": "bootstrap", // full_numbers
    "iDisplayStart ": 10,
    "iDisplayLength": 10,
    "bPaginate": false, //hide pagination
    "bFilter": false, //hide Search bar
    "bInfo": false, // hide showing entries
})

【讨论】:

    【解决方案4】:
    $(document).ready(function () {
                $('#Grid_Id').dataTable({
                    "bPaginate": false
                });
            });
    

    我已经用它解决了我的问题。

    【讨论】:

      【解决方案5】:
      $('#table_id').dataTable({    
          "bInfo": false, //Dont display info e.g. "Showing 1 to 4 of 4 entries"
          "paging": false,//Dont want paging                
          "bPaginate": false,//Dont want paging      
      })
      

      试试这个代码

      【讨论】:

        【解决方案6】:

        如果您想删除分页但又想对 dataTable 进行排序,请将此脚本添加到页面末尾!

        <script>
        $(document).ready(function() {        
            $('#table_id').DataTable({
                "paging":   false,
               "info":     false
            } );
              
          } );
        </script>

        【讨论】:

          【解决方案7】:

          这是一个替代方案,它是对其他几个答案的增量改进。假设 settings.aLengthMenu 不是多维的(可以是 DataTables 有行长和标签的时候)并且页面加载后数据不会改变(对于简单的 DOM 加载的 DataTables),可以插入这个函数来消除分页。它隐藏了几个与分页相关的类。

          也许更强大的方法是在下面的函数中将分页设置为 false,但是我没有看到对那个副手的 API 调用。

          $('#myTable').on('init.dt', function(evt, settings) {
              if (settings && settings.aLengthMenu && settings.fnRecordsTotal && settings.fnRecordsTotal() < settings.aLengthMenu[0]) {
                  // hide pagination controls, fewer records than minimum length
                  $(settings.nTableWrapper).find('.dataTables_paginate, .dataTables_length, .dataTables_info').hide();
              }
          }).DataTable();
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2019-02-14
            • 2017-11-15
            • 2014-12-30
            • 2017-05-13
            • 1970-01-01
            • 2023-04-09
            • 2019-09-28
            • 2018-03-19
            相关资源
            最近更新 更多