Javascript datatable columns 对指定列加入fliter功能的小结

最新推荐文章于 2022-03-04 14:22:59 发布

fsmickey

最新推荐文章于 2022-03-04 14:22:59 发布

阅读量1.4k

点赞数

文章标签： javascript datatable

本文链接：https://blog.csdn.net/fsmickey/article/details/83744159

版权

这篇博客介绍了如何在JavaScript的DataTables中为指定列添加过滤功能。通过设置'columnDefs'参数并在第四列应用渲染函数实现过滤。当类型为'filter'时，返回输入框的值，否则返回原始数据。同时，对指定列进行初始化，生成下拉选择框并绑定'onchange'事件，以根据选择值进行搜索过滤。在实现过程中遇到了因DataTables版本过低导致的错误，通过升级到1.10.9版本解决了问题。

摘要由CSDN通过智能技术生成

（1）对指定列加上过滤功能

在使用datatable功能的过程中，当你需要以某一列来过滤时，在datable中加一个参数："columnDefs"，在第4列中进行过滤，则在该参数里写上："targets": [4], 另外要进行渲染：“render"，代码如下：

"columnDefs": [
{
"targets": [4],
"render": function ( data, type, full, meta ) {
if(type === 'filter'){
return $('#results').dataTable().cell(meta.row, meta.col).nodes().to$().find('input').val();
} else {
return data;
}
}
}
]

接着，要对datatable的这一列进行初始化，把这一列对应的html代码写进该列，并加入onchange事件，代码如下：

initComple