datatable js 按列筛选_js实现页面表格筛选 - Rocky_chi的个人空间 - OSCHINA - 中文开源技术交流社区...

关于表格内容的筛选处理有很多种方法，总体来说可以分为前端和后端两种。1，用带筛选条件的sql语句去查询数据库，得到需要的数据显示在页面上，最好用ajax来实现。2，页面渲染的时候带条件地显示需要的数据。

最近也是碰到了问题，用上述第一种方法行不通，因为表格的包含自定义的checkbox，重新加载过后需要绑定click事件。而用ajax来做的话，绑定事件会在元素加载完成之前就执行。所以不考虑。而用前端筛选也遇到问题。用jstl的与，配合确实能达到筛选效果，无奈本人的项目是使用jsf框架来做的，是用来生成的表格，当用jstl来筛选的时候，即使条件不符合，页面上也会显示该跳数据对应的行，只不过是没内容。

所以如果是用jsp的话，那用jstl标签来做也是完全可以的。但我这里就要采用JavaScript来自己做筛选了。

页面上不多说了，如果是文本框search形式的，监听keyup事件，下拉框形式的，监听onchange事件等等。js的思路就是，遍历表格内容，如果等于所要筛选的字段，那就显示数据；如果不等，则隐藏数据。

隐藏数据，刚开始我是采用{visibility: hidden, position: absolute}的方式：

var category = document.getElementById("categories").value;//所要筛选的字段

var trs = document.getElementById("details").getElementsByTagName("tr");//得到table所有的行(包括head里的)