jQuery Datatables，如何从每个页面获取所有选中的复选框 [英] jQuery Datatables, How to get all selected checkboxes from EVERY page
本文介绍了jQuery Datatables，如何从每个页面获取所有选中的复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试通过jQuery DataTables获取所有选中的复选框.基本上，我的代码会按预期运行，但是我只得到当前DataTables页面的复选框，我想从每个页面获取数据.
I'm trying to get all selected checkboxes via jQuery DataTables. Basically my code does as it should, but I'm only getting the checked boxes of the current DataTables page, I want to get the Data from every page.
我正在使用这段代码:
var data = new Object();
$.each($('#addUsersToAboTable :checkbox:checked'),function(a,b){
data[a] = $(this).val();
});
这里是一个示例，结果显示在控制台中.
$(document).ready(function(){
$('#addUsersToAboTable').DataTable();
$('#getDataBtn').on('click',function(){
var data = new Object();
$.each($('#addUsersToAboTable :checkbox:checked'),function(a,b){
data[a] = $(this).val();
});
console.log(data);
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<button type="button" id="getDataBtn" class="btn btn-success">Get Data</button>
<table id="addUsersToAboTable" class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
</tbody>
</table>
<br><br><br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
单击按钮后，我只会得到当前页面的复选框，是否有更好的方法来获取所需的数据?
On Button click, I only get the checked boxes of the current page, is there a better way of getting the needed data?
推荐答案
You can use datatables row index API to get the index of the clicked row and on every checkbox change the data object can be modified.
$(document).ready(function(){
var data = new Object();
var table = $('#addUsersToAboTable').DataTable();
$('#addUsersToAboTable').on('change', ':checkbox', function () {
data[table.row($(this).parents('tr').get(0)).index()] = this.checked;
});
$('#getDataBtn').on('click',function(){
console.log(data);
});
});
注意:上面的代码将值保存为true/false，同时将其保存为0/1，但我希望这里的逻辑清晰
Note: Above code saves the value as true/false while you save it as 0/1 but I hope the logic here is clear
代码段:
$(document).ready(function(){
var data = new Object();
var table = $('#addUsersToAboTable').DataTable();
$('#addUsersToAboTable').on('change', ':checkbox', function () {
data[table.row($(this).parents('tr').get(0)).index()] = this.checked;
});
$('#getDataBtn').on('click',function(){
console.log(data);
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<button type="button" id="getDataBtn" class="btn btn-success">Get Data</button>
<table id="addUsersToAboTable" class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
<tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>
</tbody>
</table>
<br><br><br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
希望这会有所帮助.
这篇关于jQuery Datatables，如何从每个页面获取所有选中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
