How to show all rows by default in JQuery DataTable

Question

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]
    });

score 262 · Accepted Answer · edited Aug 19 '14 at 20:49

262

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
});

edited Aug 19 '14 at 20:49

Petah

45,477
28
157
213

answered Oct 04 '12 at 12:41

LCoelho

2,951
1
16
13

17

Or `"paging": false` if you use [DataTables 1.10 new API](https://datatables.net/reference/option/paging). – Ronan Jouchet May 08 '14 at 18:39
Or `` if you want to use DOM options (DataTables 1.10+, see https://datatables.net/manual/data/orthogonal-data#HTML-5).
– Jeromy French Aug 15 '16 at 16:01
2

The meat of this very correct answer is iDisplayLength: -1 – Joe Johnston Jan 31 '17 at 17:59

score 17 · Answer 2 · answered Feb 25 '12 at 12:11

17

The option you should use is iDisplayLength:

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

answered Feb 25 '12 at 12:11

Bartek Kobyłecki

2,365
14
24

score 6 · Answer 3 · edited Aug 25 '15 at 11:20

6

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

edited Aug 25 '15 at 11:20

Gyrocode.com

57,606
14
150
185

answered Aug 25 '15 at 10:19

RHOUG

77
1
1

score 3 · Answer 4 · answered Dec 17 '21 at 07:20

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"]
    ],
});

score 2 · Answer 5 · answered Oct 19 '16 at 06:43

2

This one works for me:

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

answered Oct 19 '16 at 06:43

tenstormavi

315
1
7
17

score 1 · Answer 6 · edited Oct 06 '16 at 18:18

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">

edited Oct 06 '16 at 18:18

Mr Lister

45,515
15
108
150

answered Sep 28 '16 at 00:36

th3byrdm4n

172
1
10

1

perfecto mondo! The best answer given the secnario where a global DataTables() initialization is done – Vishnoo Rath Dec 29 '18 at 05:50

score 1 · Answer 7 · answered Mar 09 '18 at 06:41

1

Here is the entire functional javascript for your .html file

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

answered Mar 09 '18 at 06:41

embulldogs99

840
9
9

score 0 · Answer 8 · answered Jul 10 '19 at 09:13

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.

I tried all the above answers and it didn't work.. Just follow the above Instructions. — Hamood K Alazri, Jul 10 '19 at 09:16

score 0 · Answer 9 · answered Feb 25 '12 at 12:04

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
            });
        }
})

How to show all rows by default in JQuery DataTable

9 Answers9

Linked