我有一个简单而基本的数据表，我在其中添加了一个带有自定义 SelectAll 复选框的标题，并为我的 tbody 中存在的每一行添加了另一个复选框（我需要添加此输入，因为我要附加一些数据属性、验证、事件等。在其上，基于行）这就是为什么我无法在 .DataTable({}) 配置上添加复选框列。目前，一切似乎都有效，唯一的问题是我的 SelectAll 事件仅适用于当前页面上的元素。例如：如果我的数据表有 2 页，并且我使用位于第 1 页的分页检查我的 SelectAll 输入，则会选择所有行，但仅在第 1 页上。我的问题是是否有办法处理此问题，保持相同的功能，或者什么可以我确实实现了 selectAll，但又不失去将事件附加到每一行的可能性。
这是我的代码和一个工作的小提琴
var ids = [];
$(document).ready(function () {
$('#example').DataTable({
"bSort": false,
"order": []
});
$(document).on('change', '#chkAll', function () {
$(':checkbox').each(function () {
this.checked = true;
});
});
$('#btnCheck').on('click', function () {
console.log(ids);
});
$('.check').on('click', function () {
var id = $(this).attr("data-id");
ids.push(id);
});
});<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<button type="button" id="btnCheck">Check selected</button>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" id="chkAll" /></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" data-id="1" /></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="2" /></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$170,750</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="3" /></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009-01-12</td>
<td>$86,000</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="19" /></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="4" /></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008-11-28</td>
<td>$162,700</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="5" /></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012-12-02</td>
<td>$372,000</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="6" /></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012-08-06</td>
<td>$137,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="7" /></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010-10-14</td>
<td>$327,900</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="8" /></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009-09-15</td>
<td>$205,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="9" /></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008-12-13</td>
<td>$103,600</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="10" /></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008-12-19</td>
<td>$90,560</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="11" /></td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013-03-03</td>
<td>$342,000</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="12" /></td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008-10-16</td>
<td>$470,600</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="13" /></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012-12-18</td>
<td>$313,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="14" /></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010-03-17</td>
<td>$385,750</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="15" /></td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012-11-27</td>
<td>$198,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="16" /></td>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010-06-09</td>
<td>$725,000</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="17" /></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009-04-10</td>
<td>$237,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="18" /></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012-10-13</td>
<td>$132,000</td>
</tr>
</tbody>
</table>rowsvar ids = [];
$(document).ready(function () {
const dt = $('#example').DataTable({
"bSort": false,
"order": []
});
$(document).on('change', '#chkAll', function () {
//=> Loop over the rows:
dt.rows((idx,data,node)=>{
const $input = $(node).find("input");
$input.attr("checked",!$input.attr("checked"));
ids.push( $input.attr("data-id") );
});
//=> Loop ends here
});
$('#btnCheck').on('click', function () {
console.log(ids);
});
$('.check').on('click', function () {
var id = $(this).attr("data-id");
ids.push(id);
});
});<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet"/>
<button type="button" id="btnCheck">Check selected</button>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" id="chkAll" /></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" data-id="1" /></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="2" /></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$170,750</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="3" /></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009-01-12</td>
<td>$86,000</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="19" /></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="4" /></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008-11-28</td>
<td>$162,700</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="5" /></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012-12-02</td>
<td>$372,000</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="6" /></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012-08-06</td>
<td>$137,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="7" /></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010-10-14</td>
<td>$327,900</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="8" /></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009-09-15</td>
<td>$205,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="9" /></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008-12-13</td>
<td>$103,600</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="10" /></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008-12-19</td>
<td>$90,560</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="11" /></td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013-03-03</td>
<td>$342,000</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="12" /></td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008-10-16</td>
<td>$470,600</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="13" /></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012-12-18</td>
<td>$313,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="14" /></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010-03-17</td>
<td>$385,750</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="15" /></td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012-11-27</td>
<td>$198,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="16" /></td>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010-06-09</td>
<td>$725,000</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="17" /></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009-04-10</td>
<td>$237,500</td>
</tr>
<tr>
<td><input type="checkbox" class="check" data-id="18" /></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012-10-13</td>
<td>$132,000</td>
</tr>
</tbody>
</table>