yadcf能否使用其他列的mData?附DataTables代码及问题
解决DataTables+YADCF隐藏列导致的筛选器绑定问题
首先,我注意到你代码里有一个语法错误,这很可能是引发问题的根源:aoColumns应该是一个数组(用方括号[]包裹),而不是对象(大括号{})。这个错误会直接让DataTables无法正确解析列配置,先把这个核心问题修正过来。
接下来,针对隐藏列和YADCF筛选器的匹配问题,核心要点是:YADCF的column_number参数默认对应DataTables定义的原始列数组索引(包含所有隐藏列),而非页面上可见列的顺序。很多人会混淆这两个索引,导致筛选器绑定到错误列,或者完全不显示。
具体解决方案
修正列配置的语法错误
把aoColumns的外层大括号改成方括号,正确结构如下:"aoColumns" : [ {sTitle: "ID", bVisible: false}, // ...其他隐藏列和可见列的配置 {sTitle: "Full Name", mData: null, mRender: function (data, type, arrRowData) { return mergeName(arrRowData[3],arrRowData[4],arrRowData[5]) }}, // ...中间列配置 {sTitle: "Column 10", mData: 14}, ]准确匹配YADCF的列索引
- 如果想用原始列索引(包含隐藏列):数清楚
aoColumns数组里目标列的位置(从0开始计数)。比如你代码里的"Column 10"是数组里第15个元素(索引14),那YADCF配置就写{ column_number: 14 }。 - 如果想用可见列顺序(忽略隐藏列):YADCF支持
visible_column_number参数,它只会统计页面上显示的列。比如"Column 10"是页面上第9个可见列(从0开始),就写{ visible_column_number: 8 }。
- 如果想用原始列索引(包含隐藏列):数清楚
修正后的完整代码示例
$('#myTable').dataTable({ "ajax" : myURL + "/GetTableData", "aoColumns" : [ {sTitle: "ID", bVisible: false}, // ...其他隐藏列配置 {sTitle: "Full Name", mData: null, mRender: function (data, type, arrRowData) { return mergeName(arrRowData[3],arrRowData[4],arrRowData[5]) }}, // ...其他列配置 {sTitle: "Column 10", mData: 14}, ], "aaSorting" : [ 0, 'desc'] }).yadcf([ // 方案1:用原始列索引(包含隐藏列) { column_number: 14 }, // 方案2:用可见列索引(如果更方便的话) // { visible_column_number: 8 } ]);
额外注意事项
- 如果隐藏列是用来存储数据(比如ID)但不需要显示,确保
bVisible: false的配置正确,不要和mData的索引混淆。 - 测试时可以临时把隐藏列设为可见(
bVisible: true),确认列的顺序和索引对应关系,没问题再改回隐藏。
内容的提问来源于stack exchange,提问作者Yury
相关产品推荐
相关产品推荐

