Change the number of displayed rows in jQuery datatable

Question

Why the number of rows in jquery datatable (see the code below) is not set to 5? It is equal to 10 8as by default). Why \'iDisplayLength\': 5 does

Answer 1

Try something like this. DataTables has built-in options that let you pull data from an AJAX source without trying to build it yourself. Read the documentation and customize 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 modify the table in some way after the data is loaded, you'll want 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

This is definetely the easiest way I found:

var oTable;

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

    oTable = $('#example').dataTable();
});

Answer 3

You can try

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

Answer 4

In addition, if you have previously been running/testing with "bStateSave": true and iDisplayLength not specified/at the default, then the saved default for iDisplayLength will override any subsequent attempts to specify a new value, and you will still get 10 rows. Try emptying the cache, setting "bStateSave": false, specifying the iDisplayLength you want, and running again.