Javascript Datatables复选框在匹配的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
                },

我希望能够在选中复选框后，选中具有相同产品id的所有复选框。这仅对当前所选页面上的记录是必需的。

---

通过复选框选择api，这似乎是可能的，但是我到目前为止还没有成功

我看不出“复选框”插件有多大价值，因为它的功能可以轻松地用几行代码实现，同时给您更大的灵活性

但是，您实际上不需要深入研究“checkbox”插件内部，因为您所需的功能可以很容易地用本机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);
  });
});

完成此概念的演示，您可以在下面找到：

//数据示例
常数srcData=[
{产品id:7，名字：'Nick'，姓氏：'Furry'，公司：'Avengers Inc'，
{产品id:7，名字：'Steve'，姓氏：'Rogers'，公司：'Avengers Inc'，
{产品id:4，名字：“亚瑟”，姓氏：“咖喱”，公司：“正义有限公司”}，
{产品id:4，名：'Clark'，姓：'Kent'，公司：'Justice Ltd'，
{产品id:4，名字：'Barry'，姓氏：'Allen'，公司：'Justice Ltd'}
];
//数据表初始化
const dataTable=$（“#显示用户”）。dataTable({
dom：‘t’，
订单：[1，‘asc']，
数据：srcData，
列：[null，…Object.keys（srcData[0]）].map（header=>（{title:header | |“”，data:header}）），
columnDefs：[
{目标：0，可排序：false，呈现：（）=>''}
]
});
//基本零件-行复选框单击hander
$（“#显示用户”）。单击（'t正文td:eq（0）[type=“checkbox”]”，函数（）{
//获取要匹配的当前复选框状态和条件（产品id）
const state=$（event.target）.prop（'checked'）；
const productId=dataTable.row（$（event.target）.closest（'tr'））.data（）.product\u id；
//迭代当前页面行，并在匹配产品id时调整复选框
行（{page:'current'}）.every（函数（）{
if（this.data（）.product_id==productId）$（this.node（））.find（'td:eq（0）[type=“checkbox”]'））.prop（'checked'，state）；
});
});
我看不出“checkbox”插件有多大价值，因为它的功能只需几行代码就可以轻松实现，同时还提供了更大的灵活性

但是，您实际上不需要深入研究“checkbox”插件内部，因为您所需的功能可以很容易地用本机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);
  });
});

完成此概念的演示，您可以在下面找到：


//数据示例
常数srcData=[
{产品id:7，名字：'Nick'，姓氏：'Furry'，公司：'Avengers Inc'，
{产品id:7，名字：'Steve'，姓氏：'Rogers'，公司：'Avengers Inc'，
{产品id:4，名字：“亚瑟”，姓氏：“咖喱”，公司：“正义有限公司”}，
{产品id:4，名：'Clark'，姓：'Kent'，公司：'Justice Ltd'，
{产品id:4，名字：'Barry'，姓氏：'Allen'，公司：'Justice Ltd'}
];
//数据表初始化
const dataTable=$（“#显示用户”）。dataTable({
dom：‘t’，
订单：[1，‘asc']，
数据：srcData，
列：[null，…Object.keys（srcData[0]）].map（header=>（{title:header | |“”，data:header}）），
columnDefs：[
{目标：0，可排序：false，呈现：（）=>''}
]
});
//基本零件-行复选框单击hander
$（“#显示用户”）。单击（'t正文td:eq（0）[type=“checkbox”]”，函数（）{
//获取要匹配的当前复选框状态和条件（产品id）
const state=$（event.target）.prop（'checked'）；
const productId=dataTable.row（$（event.target）.closest（'tr'））.data（）.product\u id；
//迭代当前页面行，并在匹配产品id时调整复选框
行（{page:'current'}）.every（函数（）{
if（this.data（）.product_id==productId）$（this.node（））.find（'td:eq（0）[type=“checkbox”]'））.prop（'checked'，state）；
});
});