我一直在为我的项目使用数据表，但我最近才发现我使用的javascript只选择当前页面中的复选框。未选择或检索其他分页/页面中已选中复选框的值。有没有办法可以识别分页的所有页面中选中的复选框？请帮忙。这是我的代码。
$('#create-po').click(function(e){
e.preventDefault();
$("input:checkbox:checked").each(function(i){
valArray[i] = $(this).val();
});
});
此代码识别当前页面中已选中的复选框，但不识别其他页面中的已选中复选框。
答案 0 :(得分：2)
出于某种原因，您无法在我的原始答案上使用扩展程序，您可以在复选框上查看change个事件，并将其记录到稍后可以访问提交功能的数组中。
尝试选中一个复选框，然后点击x将其从DOM中删除并启动Create PO。他们的价值观仍应记录下来。
var $detached = [];
var $table = $('#dataTable');
var $valuesContainer = $('.selectValues');
var $countContainer = $('.selectCount');
var valArray = [];
// watch for change events on the checkbox
$("input:checkbox").on('change', function () {
var value = $(this).val();
if(this.checked) {
valArray.push(value); // record the value of the checkbox to valArray
} else {
valArray.pop(value); // remove the recorded value of the checkbox
}
});
// here do something to valArray
$('#create-po').on('click', function (e) {
e.preventDefault();
$valuesContainer.html(valArray.join(', '));
$countContainer.html(valArray.length);
})
// for testing purpose
$table.find('button').on('click', function () {
var $row = $(this).parents('tr');
$detached.push($row.detach());
});
$('#reset').on('click', function () {
$table.find('tbody').append($detached);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><button id="reset">Reattach Removed Items</button></p>
<pre>
count: <span class="selectCount"></span>
values: [ <span class="selectValues"></span> ]
</pre>
<table id="dataTable">
<tbody>
<tr><td><label><input type="checkbox" value="item-1">item 1</label> <button>x</button></td></tr>
<tr><td><label><input type="checkbox" value="item-2">item 2</label> <button>x</button></td></tr>
<tr><td><label><input type="checkbox" value="item-3">item 3</label> <button>x</button></td></tr>
<tr><td><label><input type="checkbox" value="item-4">item 4</label> <button>x</button></td></tr>
<tr><td><label><input type="checkbox" value="item-5">item 5</label> <button>x</button></td></tr>
</tbody>
</table>
<p><a href="#" id="create-po">Create PO</a></p>
根据我对你的代码的理解，你只计算点击时检查的元素数量，遗憾的是数据表是＆＃34;重绘＆＃34;当你离开那个页面时。您需要存储＆＃34;已检查＆＃34;其他地方的值或使用内置的选择扩展名。
我也偶然发现了这个请求并做了fiddle你可能觉得有用。
var json = {"data": [{"name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421"}, {"name": "Garrett Winters", "position": "Accountant", "salary": "$170,750", "start_date": "2011/07/25", "office": "Tokyo", "extn": "8422"}, {"name": "Ashton Cox", "position": "Junior Technical Author", "salary": "$86,000", "start_date": "2009/01/12", "office": "San Francisco", "extn": "1562"}, {"name": "Cedric Kelly", "position": "Senior Javascript Developer", "salary": "$433,060", "start_date": "2012/03/29", "office": "Edinburgh", "extn": "6224"}, {"name": "Airi Satou", "position": "Accountant", "salary": "$162,700", "start_date": "2008/11/28", "office": "Tokyo", "extn": "5407"}, {"name": "Brielle Williamson", "position": "Integration Specialist", "salary": "$372,000", "start_date": "2012/12/02", "office": "New York", "extn": "4804"}, {"name": "Herrod Chandler", "position": "Sales Assistant", "salary": "$137,500", "start_date": "2012/08/06", "office": "San Francisco", "extn": "9608"}, {"name": "Rhona Davidson", "position": "Integration Specialist", "salary": "$327,900", "start_date": "2010/10/14", "office": "Tokyo", "extn": "6200"}, {"name": "Colleen Hurst", "position": "Javascript Developer", "salary": "$205,500", "start_date": "2009/09/15", "office": "San Francisco", "extn": "2360"}, {"name": "Sonya Frost", "position": "Software Engineer", "salary": "$103,600", "start_date": "2008/12/13", "office": "Edinburgh", "extn": "1667"}, {"name": "Jena Gaines", "position": "Office Manager", "salary": "$90,560", "start_date": "2008/12/19", "office": "London", "extn": "3814"}, {"name": "Quinn Flynn", "position": "Support Lead", "salary": "$342,000", "start_date": "2013/03/03", "office": "Edinburgh", "extn": "9497"}, {"name": "Charde Marshall", "position": "Regional Director", "salary": "$470,600", "start_date": "2008/10/16", "office": "San Francisco", "extn": "6741"}, {"name": "Haley Kennedy", "position": "Senior Marketing Designer", "salary": "$313,500", "start_date": "2012/12/18", "office": "London", "extn": "3597"}, {"name": "Tatyana Fitzpatrick", "position": "Regional Director", "salary": "$385,750", "start_date": "2010/03/17", "office": "London", "extn": "1965"}, {"name": "Michael Silva", "position": "Marketing Designer", "salary": "$198,500", "start_date": "2012/11/27", "office": "London", "extn": "1581"}, {"name": "Paul Byrd", "position": "Chief Financial Officer (CFO)", "salary": "$725,000", "start_date": "2010/06/09", "office": "New York", "extn": "3059"}, {"name": "Gloria Little", "position": "Systems Administrator", "salary": "$237,500", "start_date": "2009/04/10", "office": "New York", "extn": "1721"}, {"name": "Bradley Greer", "position": "Software Engineer", "salary": "$132,000", "start_date": "2012/10/13", "office": "London", "extn": "2558"}, {"name": "Dai Rios", "position": "Personnel Lead", "salary": "$217,500", "start_date": "2012/09/26", "office": "Edinburgh", "extn": "2290"}, {"name": "Jenette Caldwell", "position": "Development Lead", "salary": "$345,000", "start_date": "2011/09/03", "office": "New York", "extn": "1937"}, {"name": "Yuri Berry", "position": "Chief Marketing Officer (CMO)", "salary": "$675,000", "start_date": "2009/06/25", "office": "New York", "extn": "6154"}, {"name": "Caesar Vance", "position": "Pre-Sales Support", "salary": "$106,450", "start_date": "2011/12/12", "office": "New York", "extn": "8330"}, {"name": "Doris Wilder", "position": "Sales Assistant", "salary": "$85,600", "start_date": "2010/09/20", "office": "Sidney", "extn": "3023"}, {"name": "Angelica Ramos", "position": "Chief Executive Officer (CEO)", "salary": "$1,200,000", "start_date": "2009/10/09", "office": "London", "extn": "5797"}, {"name": "Gavin Joyce", "position": "Developer", "salary": "$92,575", "start_date": "2010/12/22", "office": "Edinburgh", "extn": "8822"}, {"name": "Jennifer Chang", "position": "Regional Director", "salary": "$357,650", "start_date": "2010/11/14", "office": "Singapore", "extn": "9239"}, {"name": "Brenden Wagner", "position": "Software Engineer", "salary": "$206,850", "start_date": "2011/06/07", "office": "San Francisco", "extn": "1314"}, {"name": "Fiona Green", "position": "Chief Operating Officer (COO)", "salary": "$850,000", "start_date": "2010/03/11", "office": "San Francisco", "extn": "2947"}, {"name": "Shou Itou", "position": "Regional Marketing", "salary": "$163,000", "start_date": "2011/08/14", "office": "Tokyo", "extn": "8899"}, {"name": "Michelle House", "position": "Integration Specialist", "salary": "$95,400", "start_date": "2011/06/02", "office": "Sidney", "extn": "2769"}, {"name": "Suki Burks", "position": "Developer", "salary": "$114,500", "start_date": "2009/10/22", "office": "London", "extn": "6832"}, {"name": "Prescott Bartlett", "position": "Technical Author", "salary": "$145,000", "start_date": "2011/05/07", "office": "London", "extn": "3606"}, {"name": "Gavin Cortez", "position": "Team Leader", "salary": "$235,500", "start_date": "2008/10/26", "office": "San Francisco", "extn": "2860"}, {"name": "Martena Mccray", "position": "Post-Sales support", "salary": "$324,050", "start_date": "2011/03/09", "office": "Edinburgh", "extn": "8240"}, {"name": "Unity Butler", "position": "Marketing Designer", "salary": "$85,675", "start_date": "2009/12/09", "office": "San Francisco", "extn": "5384"}, {"name": "Howard Hatfield", "position": "Office Manager", "salary": "$164,500", "start_date": "2008/12/16", "office": "San Francisco", "extn": "7031"}, {"name": "Hope Fuentes", "position": "Secretary", "salary": "$109,850", "start_date": "2010/02/12", "office": "San Francisco", "extn": "6318"}, {"name": "Vivian Harrell", "position": "Financial Controller", "salary": "$452,500", "start_date": "2009/02/14", "office": "San Francisco", "extn": "9422"}, {"name": "Timothy Mooney", "position": "Office Manager", "salary": "$136,200", "start_date": "2008/12/11", "office": "London", "extn": "7580"}, {"name": "Jackson Bradshaw", "position": "Director", "salary": "$645,750", "start_date": "2008/09/26", "office": "New York", "extn": "1042"}, {"name": "Olivia Liang", "position": "Support Engineer", "salary": "$234,500", "start_date": "2011/02/03", "office": "Singapore", "extn": "2120"}, {"name": "Bruno Nash", "position": "Software Engineer", "salary": "$163,500", "start_date": "2011/05/03", "office": "London", "extn": "6222"}, {"name": "Sakura Yamamoto", "position": "Support Engineer", "salary": "$139,575", "start_date": "2009/08/19", "office": "Tokyo", "extn": "9383"}, {"name": "Thor Walton", "position": "Developer", "salary": "$98,540", "start_date": "2013/08/11", "office": "New York", "extn": "8327"}, {"name": "Finn Camacho", "position": "Support Engineer", "salary": "$87,500", "start_date": "2009/07/07", "office": "San Francisco", "extn": "2927"}, {"name": "Serge Baldwin", "position": "Data Coordinator", "salary": "$138,575", "start_date": "2012/04/09", "office": "Singapore", "extn": "8352"}, {"name": "Zenaida Frank", "position": "Software Engineer", "salary": "$125,250", "start_date": "2010/01/04", "office": "New York", "extn": "7439"}, {"name": "Zorita Serrano", "position": "Software Engineer", "salary": "$115,000", "start_date": "2012/06/01", "office": "San Francisco", "extn": "4389"}, {"name": "Jennifer Acosta", "position": "Junior Javascript Developer", "salary": "$75,650", "start_date": "2013/02/01", "office": "Edinburgh", "extn": "3431"}, {"name": "Cara Stevens", "position": "Sales Assistant", "salary": "$145,600", "start_date": "2011/12/06", "office": "New York", "extn": "3990"}, {"name": "Hermione Butler", "position": "Regional Director", "salary": "$356,250", "start_date": "2011/03/21", "office": "London", "extn": "1016"}, {"name": "Lael Greer", "position": "Systems Administrator", "salary": "$103,500", "start_date": "2009/02/27", "office": "London", "extn": "6733"}, {"name": "Jonas Alexander", "position": "Developer", "salary": "$86,500", "start_date": "2010/07/14", "office": "San Francisco", "extn": "8196"}, {"name": "Shad Decker", "position": "Regional Director", "salary": "$183,000", "start_date": "2008/11/13", "office": "Edinburgh", "extn": "6373"}, {"name": "Michael Bruce", "position": "Javascript Developer", "salary": "$183,000", "start_date": "2011/06/27", "office": "Singapore", "extn": "5384"}, {"name": "Donna Snider", "position": "Customer Support", "salary": "$112,000", "start_date": "2011/01/25", "office": "New York", "extn": "4226"}] }
var example = $('#example').DataTable({
data: json.data,
select: {
style: 'multi'
},
columns: [
{"data": "name"},
{"data": "position"},
{"data": "office"},
{"data": "extn"},
{"data": "start_date"},
{"data": "salary"}
]
});
// custom counter
var counter = $('#count > span');
function updateCounter(data) {
counter.html(data.length);
}
example.on('select', function() {
var data = example.rows({
selected: true
}).data();
updateCounter(data)
});
example.on('deselect', function() {
var data = example.rows({
selected: true
}).data();
updateCounter(data)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet"/>
<h4 id="count"><span></span> items selected</h4>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
答案 1 :(得分：1)
您可以尝试这样的事情：
var selectedRowIds = [];
$('#btnSubmit').click(function(){
$('#myTable tbody tr:has(input:checkbox:checked)').each(function(){
//Collecting the row values of the checked rows in an array.
selectedRowIds.push($(this).val());
});
});
答案 2 :(得分：0)
这个问题有一个可能的解决方案here。只能在当前页面上获取复选框值的问题来自于使用带有DataTables的DOM方法。要访问其他值，您必须使用以下命令访问该表：
dataTable.rows().nodes().to$().find('input[type="checkbox"]').each(function(){}
有关正在存储并发送到服务器的复选框值的工作版本，请参阅here。此外，DataTable FAQs提供了有关DOM交互的一些有用信息。
答案 3 :(得分：0)
JQUERY 3.3.1
var detached = [];
var table = $('#employee-grid').DataTable();
var valuesContainer = $('.selectValues');
var countContainer = $('.selectCount');
var valArray = [];
// watch for change events on the checkbox
// $('#example').on('click', 'input[type="checkbox"]', function() {
// var row = table.row($(this).closest('tr'));
// table.cell({ row: row.index(), column: 0 } ).data( this.checked ? 1 : 0 )
// row.invalidate().draw()
// })
$('#employee-grid').on('click', 'input[type="checkbox"]', function() {
var value = $(this).val();
alert(value);
if(this.checked) {
valArray.push(value); // record the value of the checkbox to valArray
} else {
valArray.pop(value); // remove the recorded value of the checkbox
}
});
// here do something to valArray
$('#create-po').on('click', function (e) {
e.preventDefault();
valuesContainer.html(valArray.join(', '));
countContainer.html(valArray.length);
})
// for testing purpose
table.find('button').on('click', function () {
var $row = $(this).parents('tr');
detached.push($row.detach());
});
HTML
<pre>
count: <span class="selectCount"></span>
values: [ <span class="selectValues"></span> ]
</pre>