【发布时间】：2017-07-22 18:20:21
【问题描述】：
我有一个显示mysql寄存器的动态表（id, product, quantity, price），每个寄存器都有一个checkbox，另一个checkbox “check/uncheck all”是一个总和列表中的产品并显示在名为 total 的input:text 上。
动态表有一个分页器，因为它上传了很多数据库的寄存器，checkbox工作完美，并且求和，但它只是在第1页上做，当我切换到页面时2，这个是未标记的，我必须点击“check/uncheck all”才能标记第2页表格的所有复选框，并将实际页面的总和与最后一页，以此类推。
我想标记“check/uncheck all”的checkbox，这样可以选择动态表所有页面的所有checkbox列表；
对不起，我的英语不好，谢谢。
我正在同时处理它的呼叫 DataTables 的寻呼机，这是我正在使用的代码：
let buys = document.getElementById('tbl-buys');
let cboxAll = buys.querySelector('thead input[type="checkbox"]');
let cboxes = buys.querySelectorAll('tbody input[type="checkbox"]');
let totalOutput = document.getElementById('total');
let total = 0;
[].forEach.call(cboxes, function (cbox) {
cbox.addEventListener('change', handleRowSelect);
});
cboxAll.addEventListener('change', function () {
[].forEach.call(cboxes, function (cbox) {
//cbox.checked = cboxAll.checked;
cbox.click();
});
});
function handleRowSelect (e) {
let row = e.target.parentNode.parentNode;
let qty = row.querySelector('td:nth-child(3)').textContent;
let price = row.querySelector('td:nth-child(4)').textContent;
let cost = Number(qty) * Number(price);
if (e.target.checked) {
total += cost;
} else {
total -= cost;
}
total = Number(total.toFixed(2));
totalOutput.value = total;
}
$(document).ready(function(){
$('#tbl-buys').DataTable({
"columnDefs": [ { orderable: false, targets: [0] }],
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered" data-page-length='2' id="tbl-buys">
<thead>
<tr>
<th>
<input type="checkbox"/>
</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>Laptop Dell XPS 15</td>
<td>1</td>
<td>782.49</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>Mouse bluetooth solar</td>
<td>1</td>
<td>19.90</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>Sony Headphones 1000px</td>
<td>1</td>
<td>29.90</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>Intel x99</td>
<td>1</td>
<td>200.00</td>
</tr>
</tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />【问题讨论】：
-
我正在使用存储在 JSON 数组中的数据来处理这个问题。所以在编码中，我使用 $.each 将 isChecked 添加到我的数据对象中，在分页中跟踪它。我使用了与您所做的类似的事件处理程序。我只需要添加逻辑来更新 html 表中的数据对象即可使其正常工作。如果你还需要这方面的帮助，我可以在 jsbin.com 完成并为你发布。
-
您好，感谢您回答我。我已经尝试了 2 周来寻找解决方案，你能在 jsbin.com 上帮我解决这个问题吗？ （对不起我的英语不好）。
标签： javascript php mysql checkbox datatable