如何在DataTables的yadcf插件中通过<th>属性而非column_number设置range_date过滤器

当然可以！完全不用依赖固定的column_number——yadcf支持通过CSS选择器定位<th>元素，这样就算列的位置变动，只要<th>的标识属性不变，过滤器就能正常工作。下面给你两种常用的实现方式：

方式1：使用自定义data属性 #

先给目标列的<th>标签添加一个自定义data属性，名字可以自己取，只要语义清晰就行：

<!-- 示例HTML表头 -->
<thead>
  <tr>
    <th>姓名</th>
    <th>部门</th>
    <th data-yadcf-target="date-range">入职日期</th>
    <!-- 其他列... -->
  </tr>
</thead>

然后在yadcf的初始化配置里，用column_selector参数替换column_number，传入对应data属性的CSS选择器：

yadcf.init(table, [
  {
    column_selector: '[data-yadcf-target="date-range"]',
    filter_type: "range_date",
    date_format: "dd/mm/yyyy", // 注意你原来的写法多了一个斜杠，这里修正为正确格式
    filter_delay: 500
  }
]);

方式2：使用的id属性 #

如果更习惯用id标识元素，也可以直接给<th>设置唯一id：

<th id="join-date-column">入职日期</th>

然后配置里用id选择器定位：

yadcf.init(table, [
  {
    column_selector: '#join-date-column',
    filter_type: "range_date",
    date_format: "dd/mm/yyyy",
    filter_delay: 500
  }
]);

补充说明 #

column_selector支持所有合法的CSS选择器（类选择器、属性选择器等都可以），只要能精准定位到目标<th>就行。这样以后调整列的顺序时，完全不用修改yadcf的配置代码，只需要保证<th>的标识属性不变就好。

另外提个小细节：你原来写的date_format: "dd//mm/yyyy"多了一个斜杠，会导致日期解析异常，建议改成dd/mm/yyyy或者你实际需要的分隔符格式。

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