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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!