show all records on datatables table when click button
dataTables provide various functions to achieve this. So below is the way how you can do this. Check for inline comments for more info:
DEMO
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
});
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>