jQuery.FilterTable是一款表格搜索过滤和单元格高亮插件。该插件允许你对任意表格进行条件过滤,并且它会将搜索到的结果单元格高亮显示,非常实用和强大。

使用方法

在页面中引入jquery和jquery.filtertable文件。

<script src="path/to/js/jquery.min.js"></script>
<script src="path/to/js/jquery.filtertable.js"></script>          
                
CSS样式

需要手动为搜索的结果设置高亮样式:

.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
.fitler-table .quick:hover { text-decoration: underline; }
td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
                
初始化插件

在页面DOM元素加载完毕之后,可以通过filterTable()来初始化该表格过滤插件。

$('table').filterTable();         
                

配置参数

jQuery.FilterTable插件的可用配置参数有:

参数 类型 默认值 描述
autofocus boolean false 过滤输入框是否自动后的焦点。
callback function(term, table) null 当一个搜索完成时的回调函数。
containerClass string filter-table 过滤输入框的css样式。
containerTag string p 过滤输入框父容器的标签名称。
hideTFootOnFilter boolean false 表格在过滤后脚部是否隐藏。
highlightClass string alt 被过滤选中的单元格的class名称。
ignoreClass string '' 在过滤时带该class的所有单元格将被忽略。
ignoreColumns array [] 数组中的列在过滤是将被忽略。
inputSelector string null 如果需要使用已经存在的input作为搜索输入框,使用该选择器来进行关联。
inputName string filter-table 搜索输入框的name名称。
inputType string search 搜索输入框的type类型。
label string Filter: 搜索输入框前面的标签。
minChars integer 1 最小的搜索字符数。
minRows integer 8 显示的最小搜索行数。
placeholder string search this table 搜索输入框的HTML5提示文本。
preventReturnKey boolean true 阻止默认的表单提交事件。
quickList array [] 使用快速搜索模式,通过可点击的文本来进行搜索,例如点击一个超链接。
quickListClass string quick 快速搜索列表项的class名称。
quickListClear string '' Label for the clear filtering quick list item
quickListGroupTag string '' Tag name surrounding quick list items
quickListTag string a 快速搜索列表项的标签名称。
visibleClass string visible 可见行的class名称。

jQuery.FilterTable表格搜索过滤插件的github地址为:https://github.com/sunnywalker/jQuery.FilterTable