1
我已经示出的MySQL（id, product, quantity, price）的寄存器，每个寄存器都有checkbox，另一checkbox动态表“选中/取消所有”这使之和产品在名单上并显示在input:text上，名为总计。复选框“选择/不选择所有”与寻呼机的DataTable
动态表有一个寻呼机，因为它上传大量数据的基础的寄存器中，checkbox工作完美，使之和，但它只是做了第1页上，当我更改为2页，这是不重要的，我必须点击“选中/取消选中全部”才能标记第2页上的表格的所有复选框，并将实际页面的总数与最后一页的总和相加，依此类推。
我想纪念的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完成并发布给你。 – Bindrid
你好，谢谢你回答我。我一直在尝试2个星期来找到解决方案，你能帮我在jsbin.com上做这件事吗？ （对不起，我的英语不好）。 – iKiishi