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 not work 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 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
 }