Monday, 23 February 2015

Changing the default number of shown elements in table using DataTables JQuery plugin

Let's imagine you have an HTML table like this one ;
<table  id="tbrefundall">
   <thead>
       <tr>
         <th>No Commande (PSN)        </th>
         <th>Montant Rembt</th>
         <th>Type Rembt</th>
         <th>Date Commande</th>
         <th>Date Demande Rembt</th>
         <th>Action</th>
       </tr>
</table>



And the following JavaScript code to generate the table content from JSON data with Jquery DataTables plugin:

var table_refund =  $('#tbrefundall').dataTable( {
        "language": {
            "url": "http://localhost/boot/js/DataTables.French.json"  
        },
        "ajax": {
            "url": "http://localhost/boot/late_payment.php?function=controle_remboursement_retard&param=json_all",
            "dataSrc": ""
        },
        "columns": [           
            { "data": "purchase_serial_number" },
            { "data": "refund_request_amount" },
            { "data": "order_detail_unit_id" },
            { "data": "purchase_creation_date" },
            { "data": "lastmod" },
            { "data": "purchase_serial_number"  }
        ]
    } );

http://www.datatables.net/forums/discussion/542/dynamically-change-idisplaylength/p1
http://stackoverflow.com/questions/12301286/change-the-number-of-displayed-rows-in-jquery-datatable



By default, with DataTables JQuery plugin, the table comes with a set of default parameters ; these default parameters can be altered  in adding some parameters ; thus, for instants, there is a default number row to be shown (10) and the number of rows is limited to a certain of number within the following list (10,25, 50,100):







To alter this list and/or the default number you have  the parameter iDisplayLength ('i' for integer) and aLengthMenu ('a' for array):

If you want to show at first, the first five rows, you will set the following :   'iDisplayLength': 5
If you want to alter the menu for length, by adding 5 to the list :   "aLengthMenu":[[5, 10, 25, 50,100], [5,10, 25, 50, 100]],
If you want to alter the menu for length, by adding the possibility to see the whole list ; you will have to add "-1" and the corresponding text ('All" in English) :   "aLengthMenu":[[5, 10, 25, 50,100,-1], [5,10, 25, 50, 100,"all"]],

In the following, we then choose '5' to be the default number of rows to be shown and set the following menu : 5,10,25,50,100,-1 to be able to show the whole list:

var table_refund =  $('#tbrefundall').dataTable( {
        "language": {
            "url": "http://localhost/boot/js/DataTables.French.json"  
        },
        "ajax": {
            "url": "http://localhost/boot/late_payment.php?function=controle_remboursement_retard&param=json_all",
            "dataSrc": ""
        },
        "columns": [           
            { "data": "purchase_serial_number" },
            { "data": "refund_request_amount" },
            { "data": "order_detail_unit_id" },
            { "data": "purchase_creation_date" },
            { "data": "lastmod" },
            { "data": "purchase_serial_number"  }
        ],
        'iDisplayLength': 5,
        "aLengthMenu":[[5,10, 25, 50, -1], [5,10, 25, 50, "Tous"]],
    } );