单击按钮时显示数据 tables table 上的所有记录

Question

有什么想法和线索，当我单击 ID 为 "show_all_records" 的按钮时如何显示所有记录？如果我单击 ID 为 "restore_records" 的按钮，数据 tables table 将恢复其默认状态，例如记录被设置回默认状态。

我可以使用"paging: false/true"但我不知道如何实际应用它。

$(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>

Answer 1

dataTables 提供各种功能来实现这一点。所以下面是你如何做到这一点的方式。检查内联评论以获取更多信息：

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
});

Answer 2

您可以使用 "lengthMenu" 在 show entities drop down 中提供选项以显示所有记录。你不需要 show all records 和 Restore records on its default state 按钮（在这种情况下）。

$('#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>

Answer 3

您必须下载 bootstrap-table.min.js 并对其进行一些修改..

如果您下载 bootstrap-table.min.js，只需打开它，然后尝试找到 "pageList:[10," 将其设为 "pageList:[10,15,20,25,50,100,"All"]" 确保 "All" 写成这样。

默认页面大小也可以从同一行更改"pageSize:10"您可以将其更改为 pageSize:"All".

其他选项也可以修改。

完成修改后不要忘记包含它或链接到新位置。

我希望它足够清晰和容易完成。

单击按钮时显示数据 tables table 上的所有记录

show all records on datatables table when click button

javascript

jquery

datatables