我有一个显示mysql寄存器的动态表（id, product, quantity, price），每个寄存器都有checkbox，另一个checkbox “检查/取消选中所有”在列表中生成一系列产品，并在名为总计的input:text上显示。
动态表有一个寻呼机，因为它上传了很多数据库的寄存器，checkbox完美地工作，并且总和，但它只是在第1页上做，当我改为第2页，这是取消标记，我必须单击“选中/取消选中所有”才能标记第2页上表格的所有复选框，并将实际页面的总和相加最后一页，等等。
我想标记的checkbox“选中/取消选中所有”，这可以选择动态表格中所有页面的所有checkbox列表; < / p>
抱歉我的英文不好，谢谢。
我正在同时处理其调用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" />
答案 0 :(得分：0)
我的解决方案会跟踪检查的内容以及与数据表关联的数据对象中的内容。
它使用drawCallback选项使显示的页面与数据对象保持同步。
我在数据表中添加了一个sum函数，用于对已检查行的salary列进行求和。
在http://jsbin.com/joxiri/edit?html,js,output
运行 $(document).ready(function () {
// Add function for summing salaries for rows that are checked
$.fn.dataTable.Api.register('sum()', function () {
var dtData = this;
var total = 0;
$.each(dtData, function (i, it) {
if (it.isChecked) {
var a = parseFloat(it.salary.replace("$", "").replace(",", ""));
total += a;
}
});
$("#total").val(total);
});
// Takes the dataset below and adds a value to track the isChecked status for the row.
$.each(dataSet, function (i, it) { it.isChecked = false; });
// Table definition
var dtapi = $('#example').DataTable({
data: dataSet,
pageLength: 3,
// We have the option of invalidating and redrawing the table on each checkox change or
// as I did, use the drawCallback to set the checkbox to match the row data
"drawCallback": function (settings) {
// not important on first draw so not worried about dtapi being defined on table initialization
if (dtapi) {
var visibleRows = $("td.cbcell").closest("tr");
visibleRows.each(function (i, item) {
$("td.cbcell input", item).prop("checked", dtapi.rows(item).data()[0].isChecked);
})
}
},
// this is the default but note that the drawCallback will not be called on each page change if set to true.
"deferRender": false,
"columnDefs": [],
"order": [1],
"columns": [
{
"data": "isChecked",
// adding the class name just to make finding the checkbox cells eaiser
"class": "cbcell",
"orderable": false,
// Put the checkbox in the title bar
"title": "<input type='checkbox' />",
// puts the checkbox in each row
"render": function (dataItem) {
if (dataItem)
return "<input checked type='checkbox'/>";
else
return "<input type='checkbox'/>";
}
},
// rest of the columns
{ data: "first_name", title: "First Name" },
{ data: "last_name", title: "Last Name" },
{ data: "position", title: "Position" },
{ data: "office", title: "Office" },
{ data: "start_date", title: "Start date" },
{ data: "salary", title: "Salary" }
]
});
// This is the event handler for the check all checkbox
$("th input[type=checkbox]").on("click", function () {
var isChecked = this.checked
var ld = $('#example').DataTable().rows().data();
$.each(ld, function (i, item) {
item.isChecked = isChecked;
});
$(".cbcell input").prop("checked", isChecked);
dtapi.data().sum();
})
// event handler for individual rows
$("#example").on("click", "td input[type=checkbox]", function () {
var isChecked = this.checked;
// set the data item associated with the row to match the checkbox
var dtRow = dtapi.rows($(this).closest("tr"));
dtRow.data()[0].isChecked = isChecked;
// determine if the over all checkbox should be checked or unchecked
if (!isChecked) {
// if one is unchecked, then checkall cannot be checked
$("th input[type=checkbox]").prop("checked", false);
}
else {
$("th input[type=checkbox]").prop("checked", true);
$.each(dtapi.data(), function (i, item) {
if (!item.isChecked) {
$("th input[type=checkbox]").prop("checked", false);
return false;
}
});
}
dtapi.data().sum();
});
});
// DataTable data set used
var dataSet = [
{
"first_name": "Airi",
"last_name": "Satou",
"position": "Accountant",
"office": "Tokyo",
"start_date": "28th Nov 08",
"salary": "$162,700"
},
{
"first_name": "Angelica",
"last_name": "Ramos",
"position": "Chief Executive Officer (CEO)",
"office": "London",
"start_date": "9th Oct 09",
"salary": "$1,200,000"
},
{
"first_name": "Ashton",
"last_name": "Cox",
"position": "Junior Technical Author",
"office": "San Francisco",
"start_date": "12th Jan 09",
"salary": "$86,000"
},
{
"first_name": "Bradley",
"last_name": "Greer",
"position": "Software Engineer",
"office": "London",
"start_date": "13th Oct 12",
"salary": "$132,000"
},
{
"first_name": "Brenden",
"last_name": "Wagner",
"position": "Software Engineer",
"office": "San Francisco",
"start_date": "7th Jun 11",
"salary": "$206,850"
},
{
"first_name": "Brielle",
"last_name": "Williamson",
"position": "Integration Specialist",
"office": "New York",
"start_date": "2nd Dec 12",
"salary": "$372,000"
},
{
"first_name": "Bruno",
"last_name": "Nash",
"position": "Software Engineer",
"office": "London",
"start_date": "3rd May 11",
"salary": "$163,500"
},
{
"first_name": "Caesar",
"last_name": "Vance",
"position": "Pre-Sales Support",
"office": "New York",
"start_date": "12th Dec 11",
"salary": "$106,450"
},
{
"first_name": "Cara",
"last_name": "Stevens",
"position": "Sales Assistant",
"office": "New York",
"start_date": "6th Dec 11",
"salary": "$145,600"
},
{
"first_name": "Cedric",
"last_name": "Kelly",
"position": "Senior Javascript Developer",
"office": "Edinburgh",
"start_date": "29th Mar 12",
"salary": "$433,060"
}
]
答案 1 :(得分：0)
使用复选框插件，我不再需要跟踪复选框了。 因为他的插件在选中时标记了一行，所以我不必将数据标记为已被检查。
sum函数simple获取所选行并总计它们。我把总数放在薪水栏的底部。
此代码在我自己的环境中工作，但无法将其放在jsbin中，因为我使用ajax从我的盒子上的Web服务获取数据。
我还使用了一个名为autoNumeric的不同插件来格式化总数。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.0.4/css/dataTables.checkboxes.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//gyrocode.github.io/jquery-datatables-checkboxes/1.0.4/js/dataTables.checkboxes.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/1.9.46/autoNumeric.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
// the checkbox plugin selects the row when
// clicked so all this function has to do it get the selected rows.
$.fn.dataTable.Api.register('sum()', function () {
var r = this.rows(".selected").data();
var total = 0;
$.each(r, function (i, it) {
total += it.salary;
});
// I put the number in the footer of the salary column
// using the autoNumeric plugin to format the amount.
$("#total").autoNumeric("set",total);
});
var table = $('#example').DataTable({
'processing': false,
// Again, this code will not work if serverSide is set to true.
'serverSide': false,
'ajax': {
// I used an asmx page in my own development environment to get the data.
url: 'wsService.asmx/GetDTDataSerializedList',
type: "post",
data: function(dtparms){
return JSON.stringify({ parameters: JSON.stringify(dtparms) });
},
contentType: "application/json; charset=utf-8",
dataFilter: function (dtData) {
var p = JSON.parse(dtData);
var d = JSON.parse(p.d);
return JSON.stringify({ data: d });
},
},
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
'columns': [
{ data: null },
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: "start_date" },
{ data:"salary", className:".salary"}
],
'order': [[1, 'asc']],
initComplete: function () {
$("#total").autoNumeric("init", { "currencySymbol": "$" });
$("#total").autoNumeric("set", 0);
}
});
// event handler for individual rows
$("tbody" ).on("click","input[type=checkbox]", function () {
table.data().sum();
});
$("thead").on("click", "th input[type=checkbox]", function () {
table.data().sum();
});
});
</script>
</head>
<body>
<form>
<div>
<table class="display" id="example" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th id="total"></th>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>