90

Does anybody know how to show all rows by default in jQuery datatable?

I have tried this code, but it only shows 10 rows by default.

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

9 Answers 9

265

Use:

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

Or if using 1.10+

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

The option you should use is iDisplayLength:

$('#adminProducts').dataTable({
  'iDisplayLength': 100
});
6
$('#table').DataTable({
   "lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ]
});
0
3

It will Load by default all entries.

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

Or if using 1.10+

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

If you want to load by default 25 not all do this.

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

This one works for me:

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

If you're using DataTables 1.10+ you can use the data-* attribute in your <table> tag data-page-length="-1"

This assumes you have "-1" defined in your datatable default configuration, such as below

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

Your javascript becomes simply $("table").DataTables(); and you're able to customize the display for every table within in the HTML; IE. if you have second, smaller table in the same page that should be limited to 10 rows, <table data-page-length="10">

1
  • 1
    perfecto mondo! The best answer given the secnario where a global DataTables() initialization is done Dec 29, 2018 at 5:50
1

Here is the entire functional javascript for your .html file

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

use '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

you have to download the bootstrap-table.min.js and make some modification to it..

  • If you download the bootstrap-table.min.js, just open it, and try to find "pageList:[10," make it as "pageList:[10,15,20,25,50,100,"All"]" make sure that "All" written as this.

  • Default page size can be changed as well from the same line "pageSize:10" you can change it as pageSize:"All".

  • Other options can be modified as well.

  • Don't forget to include it or linked to new place after completed your modification.

I hope it is clear and easy enough to be done.

1
  • I tried all the above answers and it didn't work.. Just follow the above Instructions. Jul 10, 2019 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.