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>

Why are you intializing the datatable and then explicitly putting the data+html inside the table; Why not let the datatable handle that itself! — Vishal
– Vishal, Commented Sep 6, 2012 at 13:39
This is just a code piece. I need to make last 2 columns as input fields. — You Kuper
– You Kuper, Commented Sep 6, 2012 at 13:45

Blazemonger · Accepted Answer · 2012-09-06 13:50:50Z

14

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
 }

edited Sep 6, 2012 at 13:50

answered Sep 6, 2012 at 13:45

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

You Kuper Over a year ago

In this case how can I define that some columns are input fields?

Blazemonger Over a year ago

Updated answer. DataTables has an answer for just about everything, but there are so many options it can be hard to find what you need. Searching that site often turns up good results.

Aravind · Accepted Answer · 2013-03-08 10:41:59Z

6

You can try

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

answered Mar 8, 2013 at 10:41

Aravind

2,2084 gold badges25 silver badges28 bronze badges

Comments

scharfmn · Accepted Answer · 2014-07-29 09:24:44Z

5

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.

edited Jul 29, 2014 at 9:24

answered Mar 26, 2014 at 22:05

scharfmn

3,7118 gold badges41 silver badges55 bronze badges

Comments

jpmonette · Accepted Answer · 2013-10-16 17:47:19Z

1

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

answered Oct 16, 2013 at 17:47

jpmonette

9362 gold badges15 silver badges30 bronze badges

Collectives™ on Stack Overflow

Change the number of displayed rows in jQuery datatable

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related