如何使用两个及以上关联下拉列表筛选DataTables数据表格？

看起来你遇到的是服务端模式下多条件筛选未生效的问题——因为你开启了serverSide: true，所有筛选逻辑都由后端处理，前端需要把所有下拉的选中值一起传给后端，同时后端也要接收并组合这些条件来过滤数据。

第一步：前端修改（传递所有筛选参数） #

你需要调整DataTables的ajax配置，用data函数收集所有下拉的筛选值，而不是只传单个参数。同时给每个下拉框绑定change事件，触发表格重新加载最新数据。

假设你的下拉框有两个（比如#propertyType和#propertyStatus），修改后的脚本示例如下：

$(document).ready(function(){
  var dataTable = $('#exampleProp').DataTable({
    "processing": true,
    "serverSide": true,
    "dom": 'lfrtip',
    "ajax": {
      "url": "<?= base_url('Property/fetchProp'); ?>",
      "dataType": "json",
      "type": "POST",
      // 新增data函数，收集所有筛选参数
      "data": function(d){
        // 把每个下拉框的选中值追加到请求参数中
        d.property_type = $('#propertyType').val();
        d.property_status = $('#propertyStatus').val();
        // 如果有更多下拉筛选，继续添加对应的参数
      }
    },
    "lengthMenu": [10, 25, 50, 100],
    // 其他原有配置...
  });

  // 给所有下拉框绑定change事件，触发表格重新加载
  $('#propertyType, #propertyStatus').on('change', function(){
    dataTable.draw(); // 重新绘制表格，触发带筛选参数的ajax请求
  });
});

第二步：后端修改（组合多条件筛选） #

在你的fetchProp方法里，需要接收前端传来的所有筛选参数，然后在数据库查询中组合这些条件。以CodeIgniter框架为例，核心逻辑如下：

public function fetchProp(){
  // 获取DataTables默认的分页、排序参数
  $draw = intval($this->input->post("draw"));
  $start = intval($this->input->post("start"));
  $length = intval($this->input->post("length"));

  // 获取前端传来的筛选参数
  $property_type = $this->input->post("property_type");
  $property_status = $this->input->post("property_status");

  // 构建查询语句
  $this->db->select('*');
  $this->db->from('properties');
  
  // 仅当参数不为空时，添加对应筛选条件
  if(!empty($property_type)){
    $this->db->where('property_type', $property_type);
  }
  if(!empty($property_status)){
    $this->db->where('property_status', $property_status);
  }

  // 处理排序逻辑
  $order = $this->input->post("order");
  if(isset($order)){
    $column = $order[0]['column'];
    $dir = $order[0]['dir'];
    $this->db->order_by($column, $dir);
  } else {
    $this->db->order_by('id', 'desc');
  }

  // 处理分页
  $this->db->limit($length, $start);
  $query = $this->db->get();

  // 整理返回给DataTables的数据格式
  $data = [];
  foreach($query->result() as $row){
    $data[] = [
      $row->id,
      $row->property_name,
      $row->property_type,
      $row->property_status,
      // 其他需要展示的字段...
    ];
  }

  $total_filtered = $this->db->count_all_results();
  $total_records = $this->db->count_all('properties');

  $output = [
    "draw" => $draw,
    "recordsTotal" => $total_records,
    "recordsFiltered" => $total_filtered,
    "data" => $data
  ];

  echo json_encode($output);
  exit();
}

关键注意事项 #

• 前端的data函数必须把所有需要的筛选参数都追加到请求中，不能遗漏
• 后端要判断参数是否为空，避免空值导致筛选逻辑出错
• 每次下拉框值变化时调用dataTable.draw()，确保触发携带最新筛选参数的请求

这样修改后，你的关联下拉筛选就能同时生效，表格会根据所有选中的下拉值组合过滤数据了。

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