DataTables PHP/AJAX多搜索下拉框实现Country与City双筛选问题

1. 调整HTML结构 #

在原有表格上方新增两个下拉筛选框，保留你原有的表格结构即可：

<!-- 筛选区域 -->
<div>
  <select id="countryFilter">
    <option value="">全部国家</option>
  </select>
  <select id="cityFilter">
    <option value="">全部城市</option>
  </select>
</div>

<!-- 原有DataTables表格结构 -->
<table id="yourTableId">
  <!-- thead、tbody按你原有逻辑写即可，确认Country、City对应列的索引（从0开始计数） -->
</table>

2. 改造JS逻辑 #

在你原有DataTables初始化代码的基础上，新增城市筛选的绑定逻辑即可，示例代码如下：

// 初始化DataTables，保留你原有所有配置项
const dataTable = $('#yourTableId').DataTable({
  // 你的原有配置：分页、数据源、列配置等全部不用修改
});

// --- 以下为新增/改造内容 ---
// 1. 动态生成下拉选项（可选，不想动态生成可以直接在HTML写死option）
// 假设Country对应列索引为2，City对应列索引为3，按你实际列顺序修改
dataTable.column(2).data().unique().sort().each(country => {
  $('#countryFilter').append(`<option value="${country}">${country}</option>`)
})
dataTable.column(3).data().unique().sort().each(city => {
  $('#cityFilter').append(`<option value="${city}">${city}</option>`)
})

// 2. 绑定国家筛选事件
$('#countryFilter').on('change', function() {
  const val = $(this).val()
  // 正则^$实现精确匹配，不需要精确匹配可以直接传val，后面两个参数改为false
  dataTable.column(2).search(val ? `^${val}$` : '', true, false).draw()
})

// 3. 绑定城市筛选事件
$('#cityFilter').on('change', function() {
  const val = $(this).val()
  dataTable.column(3).search(val ? `^${val}$` : '', true, false).draw()
})

注意事项 #

• 列索引从0开始计数，需要根据你表格的实际列顺序调整column()方法内的数值，比如Country是第3列就填2，City是第4列就填3
• 两个筛选规则会自动叠加，选中国家后再选城市，会自动筛选对应国家下的目标城市数据
• 如果需要模糊匹配筛选，把search方法的参数改为search(val, false, false)即可

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