CODEWITHSUNDEEP
javascriptjquerydatatable
You Kuper
You Kuper

Reputation: 1113

Change the number of displayed rows in jQuery datatable

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>

Upvotes: 8

Views: 61303

Answers (4)

scharfmn
scharfmn

Reputation: 3661

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.

Upvotes: 5

jpmonette
jpmonette

Reputation: 936

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

Upvotes: 1

Aravind
Aravind

Reputation: 2198

You can try 

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

Upvotes: 6

Blazemonger
Blazemonger

Reputation: 93003

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
 }

Upvotes: 14

Related Questions