javascript - 如何根据列值在每行上显示复选框 - JQuery DataTable

Question

我使用下面的代码在 Jquery 数据表中显示复选框。

var table = $('#example').DataTable({
  'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
  'columnDefs': [
     {
        'targets': 0,
        'checkboxes': {
           'selectRow': true
        }
     }
  ],
  'select': {
     'style': 'multi',
     'selector': 'td:first-child'
  },     
  'order': [[1, 'asc']]
  });

https://jsfiddle.net/09yLegu3/

我有一个新要求，我想仅基于列值显示复选框。我有名为 Office 的列。仅当 Office 值为“Tokyo”时才应显示复选框。我如何实现此 jquery 数据表。任何人都可以帮忙提供示例代码吗？

Answer 1

您可以通过调用 drawCallback() 来实现此目的初始化 DataTable 时的函数，并在其中检查每一行的 Office 列是否包含“Tokyo”；如果是这样，请删除第一列中的复选框:

$(document).ready(function() {
  var table = $('#example').DataTable({
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
    'columnDefs': [{
      'targets': 0,
      'checkboxes': {
        'selectRow': true
      }
    }],
    'select': {
      'style': 'multi',
      'selector': 'td:first-child'
    },
    'order': [
      [1, 'asc']
    ],
    "drawCallback": function() {
      $("#example tr").each(function() {
        if ($(this).find("td:eq(3)").text() != "Tokyo") {
          $($(this)).find("td:eq(0)").find("input[type='checkbox']").remove();
        }

      });
    }
  });
});

工作中Fiddle .