用于禁用特定列搜索的复选框

Question

我正在尝试为表格制作复选框，借助它，我可以关闭某些列的搜索模式。 不幸的是到目前为止没有成功。 是否有关于如何通过单击复选框或按钮禁用对特定列的搜索的提示？

像这样的东西：

dt = $('#mytable').DataTable();
$('#disall').click(function() {
    dt.columns[0].searchable = false;
    dt.columns[1].searchable = false;
    dt.columns[2].searchable = false;
    dt.columns[4].searchable = false;
    dt.columns[5].searchable = false;
});

我的桌子：

$('#mytable').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "server_processing.php",
    columns: [
        {
            data: 'ID',
            "searchable": true
        },
        {
            data: 'UF_INPUT_URL',
            "searchable": true,
            "render": function(data, type, row) {
                var shortTitle = truncate(data, 30);
                return "<a target='_blank' href='" + data + "'>" + shortTitle + "</a>";
            }
        },
        {
            data: 'UF_OUTPUT_URL',
            "searchable": true,
            "render": function(data, type, row) {
                var shortTitle = truncate(data, 30);
                return "<a target='_blank' href='" + data + "'>" + shortTitle + "</a>";
            }
        },
        {
            data: 'UF_CMS',
            "searchable": true
        },
        {
            data: 'UF_EMAILS',
            "searchable": true,
            "render": function(data, type, row) {
                return data.split(",").join("<br/>");
            }
        },
        {
            data: 'UF_SOCIAL',
            "searchable": true,
            "render": function(data, type, row) {
                return data.split(",").join("<br/>");
            }
        }
    ],
    "deferRender": true,
    "responsive": true,
    "bFilter" : true,
    "bLengthChange": false,
    "searching": true,
    "bInfo": false,
    "paging": true,
    "bAutoWidth": false,
});

PS从评论来看，您根本没有阅读问题，而是立即提出不喜欢...请阅读问题然后写评论。 感谢）

Answer 1

您可以通过实现自定义搜索 function 来实现此目的。

这是我的 6 列表格。 只是为了说明，我添加了 3 个复选框 - 因此您需要添加剩余的复选框才能完成此练习。

复选框如下：

  <div>
    <input type="checkbox" id="name" name="name" checked>
    <label for="name">Name</label>
  </div>
  <div>
    <input type="checkbox" id="pos" name="position" checked>
    <label for="pos">Position</label>
  </div>
  <div>
    <input type="checkbox" id="off" name="off" checked>
    <label for="off">Office</label>
  </div>

数据表脚本如下：

$(document).ready(function() {

  var checkedCols = [];

  $.fn.dataTable.ext.search.push(
     
    // https://datatables.net/manual/plug-ins/search#Plug-in-structure
    function( settings, searchData, index, rowData, counter ) {

      var searchText = $('div.dataTables_filter input').val().toLowerCase();
      if (searchText === '') {
        return true;
      }

      if (counter === 0) { // we are starting a new search
        checkedCols = [];
        if ( $('input#name:checked').length === 1 ) { checkedCols.push(0); }
        if ( $('input#pos:checked').length === 1 )  { checkedCols.push(1); }
        if ( $('input#off:checked').length === 1 )  { checkedCols.push(2); }
      }
      var colData = [];
      for (var i = 0; i < checkedCols.length; i++) {
        colData.push(searchData[checkedCols[i]]);
        if ( searchData[checkedCols[i]].toLowerCase().includes(searchText) ) {
          return true;
        }
      }
      return false;
    }
  );

  $('#example').DataTable( {
    // your initialization items in here.
  } );


} );

注意事项：

除了添加剩余的 HTML 复选框外，您还需要更新自定义搜索逻辑以引用添加的复选框。

我使用数组var checkedCols = []; 跟踪复选框的状态。

我使用 DataTables function $.fn.dataTable.ext.search.push来捕获过滤器事件。

在每个过滤器事件开始时，我们会看到哪些复选框被选中。

然后，对于每一行数据，我们构建一个新数组，其中只包含选中字段的数据。 我们在应用搜索时使用这个新数组中的数据：

if ( searchData[checkedCols[i]].toLowerCase().includes(searchText) ) {...}

解决方案可以稍微改进一下。 例如，当有人更改复选框时不会重新应用搜索 - 但可以使用复选框更改事件和 DataTables search() API 添加。

这是一个示例，其中名称复选框未选中 - 搜索词“Airi”无法找到任何数据：