jQuery表格搜索过滤和单元格高亮插件-爱编程

jQuery表格搜索过滤和单元格高亮插件

来源：htmleaf 阅读：22 时间：2018-02-04 01:34

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

在线预览源码下载