Juliver Galleto
Reputation: 9037
show all records on datatables table when click button
any ideas, clues how to show all records when I click the button that has an id of "show_all_records"? and if I click the button that has an id of "restore_records", the datatables table will restore on its default state e.g. records are set back to default state.
I can use "paging: false/true" but I dont know how to apply it in a live way.
$(document).ready(function(){
$('#sample_table').DataTable( {
"bSort": false,
"pagingType": "full_numbers",
"dom": 'T<"clear">lfrtip',
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/r/dt/dt-1.10.8/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/dt-1.10.8/datatables.min.js"></script>
<table cellpadding="0" cellspacing="0" id="sample_table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Branch</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
<tr>
<td>Sample Name 1</td><td>Sample position</td><td>sample branch</td><td>sample department</td>
</tr>
</tbody>
</table>
<button id="show_all_records">show all records</button>
<button id="restore_records">Restore records on its default state</button>Upvotes: 7
Views: 13247
Answers (3)
Hamood K Alazri
Reputation: 11
You have to download the bootstrap-table.min.js and make some modification to it..
If you download the bootstrap-table.min.js, just open it, and try to find "pageList:[10," make it as "pageList:[10,15,20,25,50,100,"All"]" make sure that "All" written as this.
Default page size can be changed as well from the same line "pageSize:10" you can change it as pageSize:"All".
Other options can be modified as well.
Don't forget to include it or linked to new place after completed your modification.
I hope it is clear and easy enough to be done.
Upvotes: 0
ozil
Reputation: 7117
you can use "lengthMenu" to give option in show entities drop down to show all records. you dont need show all records and Restore records on its default state buttons(in this case).
$('#sample_table').DataTable({
"bSort": false,
"pagingType": "full_numbers",
"dom": 'T<"clear">lfrtip',
"lengthMenu": [[10, 25, 50, -1],[10, 25, 50, "All"]
]
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/r/dt/dt-1.10.8/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/r/dt/dt-1.10.8/datatables.min.js"></script>
<table cellpadding="0" cellspacing="0" id="sample_table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Branch</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sample Name 1</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 2</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 3</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 4</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 5</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 6</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 7</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 8</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 9</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 10</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 11</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 12</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 13</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 14</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 15</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 16</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 17</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 18</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 19</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 20</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 21</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 22</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 23</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 24</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 25</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 26</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 27</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 28</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 29</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 30</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 31</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 32</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 33</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 34</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 35</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 36</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 37</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 38</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 39</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
<tr>
<td>Sample Name 40</td>
<td>Sample position</td>
<td>sample branch</td>
<td>sample department</td>
</tr>
</tbody>
</table>Upvotes: 2
Guruprasad J Rao
Reputation: 29683
dataTables provide various functions to achieve this. So below is the way how you can do this. Check for inline comments for more info:
var oTable; //global variable to hold reference to dataTables
var oSettings; //global variable to hold reference to dataTables settings
$(document).ready(function(){
oTable=$('#sample_table').DataTable( {
"bSort": false,
"pagingType": "full_numbers",
"dom": 'T<"clear">lfrtip',
}); //store reference of your table in oTable
oSettings = oTable.settings(); //store its settings in oSettings
});
$("#show_all_records").on('click',function(){
oSettings[0]._iDisplayLength = oSettings[0].fnRecordsTotal();
//set display length of dataTables settings to the total records available
oTable.draw(); //draw the table
});
$("#restore_records").on('click',function(){
oSettings[0]._iDisplayLength=10;
//set it back to 10
oTable.draw();//again draw the table
});
Upvotes: 14
Related Questions
- How to loop through all rows in DataTables jQuery?
- How to show all rows on table with using Datatable jQuery
- How to load DataTables data on button click
- JQuery dataTable always show all records in one page
- Jquery Datatable show entries and global search
- Display column on click of button in Datatable
- How to show only selected rows when a button is clicked in jquery?
- load data when button is click
- DataTables show different button according to query
- Jquery DataTables - trigger show all entries