如何在JQuery DataTable中默认显示所有行


78

有人知道如何在jQuery数据表中默认显示所有行吗?

我已经尝试过此代码,但是默认情况下它仅显示10行。

   $("#adminProducts").dataTable({
        "aLengthMenu": [100]
    });

Answers:


223

使用:

$('#example').dataTable({
    aLengthMenu: [
        [25, 50, 100, 200, -1],
        [25, 50, 100, 200, "All"]
    ],
    iDisplayLength: -1
});

或者如果使用1.10+

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

16
或者,"paging": false如果您使用DataTables 1.10新API
罗南·乔谢

或者,<table data-display-length='-1'>如果您想使用DOM选项(DataTables 1.10+,请参见datatables.net/manual/data/orthogonal-data#HTML-5)。
Jeromy French

2
这个非常正确的答案的关键是iDisplayLength:-1
Joe Johnston

16

您应该使用的选项是iDisplayLength:

$('#adminProducts').dataTable({
  'iDisplayLength': 100
});

4
$('#table').DataTable({
   "lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ]
});

3

这对我有用:

    $(document).ready(function() {
    $('#example').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
      } );
    } );

1

如果您使用的是DataTables 1.10+,则可以在<table>代码中 使用data- *属性data-page-length="-1"

假设您在数据表默认配置中定义了“ -1”,如下所示

$.extend(true, $.fn.dataTable.defaults, { 
    lengthMenu: [[10, 25, 50, 250, -1], [10, 25, 50, 250, "All"]]
});

您的javascript变得很简单$("table").DataTables();,您可以自定义HTML中每个表格的显示;IE浏览器 如果您在同一页面中有第二个较小的表,该表应限制为10行,<table data-page-length="10">


1
完美的蒙多!在完成全局DataTables()初始化的secnario中,最好的答案是
Vishnoo Rath 18/12/29

0

使用'fnDrawCallback'

  $('#dataTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "fnInitComplete": function(){
            $('.display_results').show();
        },
        "fnDrawCallback": function() {
            $('.def').click(function(){
                var msg = $(this).next().text();
                $('.messages').messageBox()//Custom Dialog
            });
        }
})

0

这是您的.html文件的完整功能javascript

<!--- javascript -->
<script type="text/javascript">
  $(document).ready(function(){
    $('#sortable').dataTable({
        'iDisplayLength': 100
    })})
</script>

0

您必须下载bootstrap-table.min.js并对其进行一些修改。

  • 如果您下载bootstrap-table.min.js,则将其打开,然后尝试找到“ pageList:[10,”,将其设置为“ pageList:[10,15,20,25,50,100,“ All”]“确保将“全部”写成这样。

  • 默认页面大小也可以在同一行“ pageSize:10”中更改,也可以将其更改为pageSize:“ All”。

  • 其他选项也可以修改。

  • 完成修改后,不要忘记添加它或链接到新位置。

我希望它足够清晰和容易地完成。


我尝试了上述所有答案,但没有成功。只需按照上述说明进行操作。
Hamood K Alazri
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.