我有一个简单而基本的DataTable，我为它添加了一个带有自定义SelectAll复选框的head，并为tbody中存在的每一行添加了另一个复选框（我需要添加此输入，因为我要根据行在其上附加一些数据属性、验证、事件等）这就是我无法在.DataTable上添加checkbox列的原因（{}）config.目前一切似乎工作，唯一的问题是，我的SelectAll事件它只与当前页面上的元素工作.例如：如果我的数据表有2个页面，并且我使用位于第1页的分页来检查SelectAll输入，则所有行都被选中，但仅在第1页上。我的问题是，是否有一种方法可以处理这种情况，同时保持相同的功能，或者我可以做些什么来实现SelectAll，而不失去将事件附加到每行的可能性。
下面是我的代码和一个可以工作的fiddle
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>
1条答案
按热度按时间6uxekuva1#
您可以使用
rowsAPI来完成此操作：