Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

show all records on datatables table when click button

Tags:

javascript

jquery

datatables

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>
like image 491
Juliver Galleto Avatar asked Aug 27 '15 05:08

Juliver Galleto

People also ask

How do I show only 5 records in a DataTable?

There is a option called pageLength . You can set this for show only 5 entries.

How do I select all DataTables?

The selectAll button will simply select all items in the table, based on the current item selection mode ( select. items() ) - e.g. if the item selection mode is rows , all rows in the table will be selected when this button is activated.

How many rows can DataTables handle?

The maximum number of rows that a DataTable can store is 16,777,216.

What is DataTables API?

DataTables has an extensive API which can be used to access the data contained in a table and otherwise manipulate the table after the table initialisation has completed. The DataTables API is designed to reflect the structure of the data in the table and how you will typically interact with the table through the API.

2 Answers

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
});
like image 181
Guruprasad J Rao Avatar answered Sep 28 '22 13:09

Guruprasad J Rao

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>
like image 29
ozil Avatar answered Sep 28 '22 13:09

ozil
Sign in to Comment

Related questions

How to protect against this type of attack?
Associate Data With HTML Element (without jQuery)
chrome.windows undefined for Chrome Extension
Merge Multiple Videos using node fluent ffmpeg
Input type ="number" Value does not update in html is this normal
webdriver-manager update error: EACCES, permission denied
DRY lazy-loaded images with <noscript> fallback
Manually trigger property change in ember.js
How to get months to show correctly in a morris.js chart?
How to access JSON Object.$$state.value?
AngularJS, $http.get() and "controller as"
How to find text in a string using google script?
adding custom attributes to fabricjs object
Why does preventDefault on checkbox click event returns true for the checked attribute?
Khan academy Algorithm: Binary Search Solution
How to use re() to extract data from javascript variable using scrapy?
How to disable checkbox with jquery?
Is there a way to make div render from right to left HTML
Export a class after definition in ES6
Reducing border width of Leaflet polygon

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!