javascript - 数据表复选框在匹配的 id 上选择多个
问题描述
我有一个带有复选框插件的服务器端数据表设置。每个复选框都有一个 product_id 的数据。
var table = $('#display_users').DataTable( {
"processing": true,
"serverSide": true,
'ajax': '{{ route ('/getUsers') }}',
'columns' : [
{"data" : "product_id"},
{"data" : "product_id"},
{"data" : "first_name"},
{"data" : "last_name"},
{"data" : "email"},
{"data" : "company"},
{"data" : "department"},
{"data" : "created_at"}
],
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
},
我希望能够在选择复选框时选择具有相同product_id 的所有复选框。这仅对当前所选页面上的记录是必需的。似乎这应该可以通过复选框选择 api 实现,但是到目前为止我还没有成功
解决方案
我认为“复选框”插件没有太大价值,因为它的功能可以用几行代码轻松实现,同时为您提供更大的灵活性。
但是,您实际上不需要深入研究“复选框”插件内部,因为您所需的功能可以使用本机 DataTables API 轻松编码:
//listen for the clicking first column checkboxes
$('#display_users').click('tbody td:eq(0) [type="checkbox"]', function(){
//grab current checkbox state and criteria to match (product_id) from the row data
const state = $(event.target).prop('checked');
const productId = dataTable.row($(event.target).closest('tr')).data().product_id;
//iterate through current page rows and adjust checkboxes upon matching product_id
dataTable.rows({page:'current'}).every(function(){
if(this.data().product_id == productId) $(this.node()).find('td:eq(0) [type="checkbox"]').prop('checked', state);
});
});
您可以在下面找到此概念的完整演示:
//data sample
const srcData = [
{product_id: 7, first_name: 'Nick', last_name: 'Furry', company: 'Avengers Inc'},
{product_id: 7, first_name: 'Steve', last_name: 'Rogers', company: 'Avengers Inc'},
{product_id: 4, first_name: 'Arthur', last_name: 'Curry', company: 'Justice Ltd'},
{product_id: 4, first_name: 'Clark', last_name: 'Kent', company: 'Justice Ltd'},
{product_id: 4, first_name: 'Barry', last_name: 'Allen', company: 'Justice Ltd'}
];
//datatable initialization
const dataTable = $('#display_users').DataTable({
dom: 't',
order: [1, 'asc'],
data: srcData,
columns: [null, ...Object.keys(srcData[0])].map(header => ({title: header || '', data: header})),
columnDefs: [
{targets: 0, orderable: false, render: () => '<input type="checkbox"></input>'}
]
});
//essential part - row checkbox click hander
$('#display_users').click('tbody td:eq(0) [type="checkbox"]', function(){
//grab current checkbox state and criteria to match (product_id)
const state = $(event.target).prop('checked');
const productId = dataTable.row($(event.target).closest('tr')).data().product_id;
//iterate through current page rows and adjust checkboxes upon matching product_id
dataTable.rows({page:'current'}).every(function(){
if(this.data().product_id == productId) $(this.node()).find('td:eq(0) [type="checkbox"]').prop('checked', state);
});
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="display_users"></table>
</body>
</html>
推荐阅读
- java - 调用 DatePickerDialog Show 时无法添加窗口异常
- c++ - RDTSC : 返回循环结束前的时间
- python - 在 Flake8 中启用所有警告?
- azure-storage - 如何在 .Net 的 Azure 存储数据移动库中设置 Blob 层
- mediawiki - 运行 facebook-mediawiki 工作负载时出现围攻错误
- java - 从maven项目中的主包访问测试资源
- c# - 将同一父类的不同对象传递给承载泛型派生类对象的构造函数/方法
- python - 如果名称以 A Django 开头,请取消选择
- python - 在 Django 中按降序显示名称和计数
- powershell - 连接到 https://outlook.office365.com/powershell-liveid:访问被拒绝