求助：如何通过Checkbox禁用DataTable特定列的搜索功能

首先，你直接修改dt.columns[0].searchable = false的方式是不对的——这是直接操作DataTable的内部属性，官方API并没有暴露这个修改方式，所以DataTable不会识别这个变化，也不会同步到服务端或者触发表格重绘。加上你的表格是服务端处理模式（bServerSide: true），所有搜索逻辑都是在服务端完成的，客户端的设置必须通过API传递给服务端才能生效。

下面给你两种可行的解决方案：

一、通过按钮批量禁用指定列的搜索 #

1. 客户端代码修改 #

首先用DataTable官方的column().searchable()方法来设置列的搜索状态，同时通过AJAX传递额外参数给服务端，告诉服务端哪些列不需要参与搜索：

// 先获取DataTable实例（注意用DataTable()而不是dataTable()，前者返回API实例）
var dt = $('#mytable').DataTable();

$('#disall').click(function() {
  // 批量设置指定列不可搜索
  dt.columns([0,1,2,4,5]).searchable(false);
  // 重新加载表格，触发服务端请求
  dt.ajax.reload();
});

然后修改你的表格初始化代码，添加ajax.data来传递自定义参数给服务端：

$('#mytable').DataTable( {
  "bProcessing": true,
  "bServerSide": true,
  "ajax": {
    "url": "server_processing.php",
    "data": function(d) {
      // 收集所有不可搜索的列索引
      var nonSearchableCols = [];
      dt.columns().every(function() {
        if (!this.searchable()) {
          nonSearchableCols.push(this.index());
        }
      });
      // 把参数传给服务端
      d.nonSearchable = nonSearchableCols;
    }
  },
  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,
});

2. 服务端代码修改（server_processing.php） #

在服务端处理搜索逻辑时，需要跳过nonSearchable参数里的列。比如原来的代码会遍历每个列的搜索值，现在要判断该列是否在不可搜索列表中，如果是就跳过：

// 假设你原来的搜索逻辑是这样的
$where = "";
if (isset($_GET['sSearch']) && $_GET['sSearch'] != "") {
  $sSearch = $_GET['sSearch'];
  $where = "WHERE (";
  $columns = array('ID', 'UF_INPUT_URL', 'UF_OUTPUT_URL', 'UF_CMS', 'UF_EMAILS', 'UF_SOCIAL');
  // 获取客户端传递的不可搜索列
  $nonSearchable = isset($_GET['nonSearchable']) ? $_GET['nonSearchable'] : array();
  
  for ($i=0; $i<count($columns); $i++) {
    // 如果当前列不在不可搜索列表中，才加入搜索条件
    if (!in_array($i, $nonSearchable)) {
      $where .= $columns[$i]." LIKE '%".$sSearch."%' OR ";
    }
  }
  $where = substr_replace($where, "", -3);
  $where .= ")";
}

二、用复选框单独切换某列的搜索状态 #

如果需要更灵活的控制（比如每个列对应一个复选框，勾选/取消勾选来切换搜索状态），可以这样写：

1. 先在页面添加对应列的复选框 #

<!-- 假设每个复选框对应一列，data-col属性是列索引 -->
<label><input type="checkbox" class="toggle-search" data-col="0" checked> ID列搜索</label>
<label><input type="checkbox" class="toggle-search" data-col="1" checked> 输入URL列搜索</label>
<!-- 其他列的复选框同理 -->

2. 客户端点击事件 #

$('.toggle-search').click(function() {
  var colIndex = $(this).data('col');
  var isChecked = $(this).is(':checked');
  // 切换该列的搜索状态
  dt.column(colIndex).searchable(isChecked).draw();
});

服务端的处理逻辑和上面一样，依然需要通过nonSearchable参数来排除对应的列。

关键注意点 #

• 必须使用DataTable的官方API column().searchable()来修改列的搜索状态，而不是直接操作内部属性
• 因为是服务端模式，所有搜索逻辑最终由服务端控制，客户端只是传递参数，所以服务端代码必须对应处理不可搜索的列
• 如果需要恢复搜索，只需要调用dt.columns([0,1,2,4,5]).searchable(true).draw()即可

内容的提问来源于stack exchange，提问作者ScreamX