Change the number of rows displayed in jQuery datatable

Question

Why is the number of rows in jquery datatable (see code below) not set to 5? By default, it is 10 8). Why is 'iDisplayLength': 5 not working here?

 <script> function loadData() { $.getJSON( 'modules/getData.php', function(data) { var oTable = $('#newspaper-b').dataTable({ "sPaginationType":"full_numbers", "aaSorting":[[3, "asc"]], "bJQueryUI":true, 'iDisplayLength': 5, 'bLengthChange': false }); oTable.fnDraw(); var list = data.flights; var textToInsert = ''; for (var i = 0; i < list.length; i++) { aux = list[i]; textToInsert += '<tr><td>'; textToInsert += aux.Var1; textToInsert += '</td> </tr>' ; } $('table#newspaper-b tbody').html(textToInsert); } ); } </script> 

Answer 1

Try something like this. DataTables has built-in options that allow you to retrieve data from an AJAX source without trying to create it yourself. Read the documentation and configure it as needed:

 function loadData() { var oTable = $('#newspaper-b').dataTable({ "sAjaxSource": 'modules/getData.php', "sPaginationType": "full_numbers", "aaSorting": [ [3, "asc"] ], "bJQueryUI": true, 'iDisplayLength': 5, 'bLengthChange': false }); }; 

To change the table in some way after loading the data, you need to add the fnDrawCallback option:

  "fnDrawCallback": function( oSettings ) { // use jQuery to alter the content of certain cells $lastcell = $('#newspaper-b').find('tr').find('td:last'); // manipulate it somehow } 

Answer 2

You can try

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

Answer 3

In addition, if you previously performed / tested with "bStateSave": true and iDisplayLength not specified / default, then the saved default value for iDisplayLength will override any subsequent attempts to specify a new value, and you will still get 10 lines. Try to clear the cache by setting "bStateSave": false , specifying the iDisplayLength that you want and run it again.

Answer 4

Check out this link, it may be useful for you:

Dynamic change iDisplayLength

Answer 5

This is by far the easiest way:

 var oTable; $(document).ready(function() { $('.some-button').click( function () { var oSettings = oTable.fnSettings(); oSettings._iDisplayLength = 50; oTable.fnDraw(); }); oTable = $('#example').dataTable(); });