使用 DataTables,如何指定要搜索的 内的元素
我正在使用 jquery DataTables,并且我有一个包含单元格的表格,每个单元格<td> 包含一个<span> 和一个隐藏的<select> ,现在我想要的只是过滤里面的文本<span> 不是全部内容<td> 其中还包含隐藏的<select> 元素。
我正在使用基本的数据表配置:
$(document).ready( function () {
$('#table_id').DataTable();
} );
我已经在这个网站、数据表网站、谷歌搜索上尝试了几天,但找不到答案,所以请帮助提前致谢
代码是在服务器上生成的,但结果表如下所示:请注意: <select> 元素被 css 隐藏
<tr>
<td>
<span>Text</span>
<select>
<option>option1</option>
<option>option2</option>
....
</select>
</td>
<td>
<span>Text</span>
<select>
<option>option1</option>
<option>option2</option>
....
</select>
</td>
</tr>
...
您可以使用下面的代码仅进行搜索<span> 在特定列的单元格内。请注意,我已经使用过"targets": [0, 1] 仅根据您的 HTML 代码定位第一列和第二列,请根据您的需要进行调整。
$('#table_id').DataTable({
"columnDefs": [{
"targets": [0, 1],
"render": function ( data, type, full, meta ) {
if(type === 'filter'){
return $('#table_id').DataTable().cell(meta.row, meta.col).nodes().to$().find('span').text();
} else {
return data;
}
}
}]
});
或者,您可以使用data-search 属性上<td> 元素指定用于过滤的值,则不需要额外的初始化代码。请参阅下面的示例:
<tr>
<td data-search="Text">
<span>Text</span>
<select>
<option>option1</option>
<option>option2</option>
....
</select>
</td>
<td data-search="Text">
<span>Text</span>
<select>
<option>option1</option>
<option>option2</option>
....
</select>
</td>
</tr>
See manual or example欲了解更多信息data- 属性。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)
|