<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¶m=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
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¶m=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"]],
} );