7

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>

Improve this question

3 Answers 3

Reset to default
14

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
});
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

brilliant! anyway i got this error "Cannot convert undefined or null to object" though its working
jQuery-2.1.3.min.js:3 Uncaught TypeError: Cannot convert undefined or null to object
That is not issue from dataTables.. But still place a debugger and check from which line its throwing error!
i see, thank you. anyway, im trying to hide all the table rows and then show the specified table rows next but it doesnt hide, any ideas?
@CodeDemon that falls in a different question now. I don't mind trying to answer but that will lead your question and my answer to a different point. If possible create a detailed question on what you want to achieve and then I can help in more efficient way!
|
2

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>

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

This is good suggestion if you have multiple pages and you need the same options for each page. If you need different options for each DataTables implementation, you would need to go with one of the other solutions.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.