顯示數據表上的所有記錄當點擊按鈕

任何想法，線索當我點擊具有「show_all_records」ID的按鈕時如何顯示所有記錄？並且如果我單擊具有「restore_records」標識的按鈕，則數據表格表將在其默認狀態下恢復，例如，記錄設置回默認狀態。顯示數據表上的所有記錄當點擊按鈕

我可以使用「分頁：錯誤/真實」，但我不知道如何以現場方式應用它。

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

來源

2015-08-27 Juliver Galleto

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

來源

2015-08-27 06:07:11

輝煌！無論如何，我得到了這個錯誤「不能轉換undefined或空對象」雖然它的工作 –

控制檯錯誤？錯誤指向哪裏？ –

jQuery-2.1.3.min.js：3 Uncaught TypeError：無法將undefined或null轉換爲對象 –

可以使用"lengthMenu"給在show entitiesdrop 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>

來源

2015-08-27 06:27:51 ozil

顯示數據表上的所有記錄當點擊按鈕

回答

相關問題