解读jquery.filtertable.min

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: 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名称。

posted @ 2017-06-29 21:03  宸少凌  阅读(255)  评论(0编辑  收藏  举报

万年以来谁著史,三千里外欲封侯