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

解读jquery.filtertable.min的更多相关文章

  1. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  3. 通过jquery.transit.min.js插件,实现图片的移动

    首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...

  4. Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js

    引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...

  5. JSON对象配合jquery.tmpl.min.js插件,手动攒出一个table

    jquery.tmpl.min.js 首先下载这个插件 1.绑定json那头的键 //TemplateDDMX 这个是这段JS的ID,这个必须写!!!!!! //${}为json的键的值,必须要填写正 ...

  6. jquery.qrcode.min.js生成二维码 通过前端实现二维码生成

    主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  7. Uncaught TypeError: Cannot read property &#39;call&#39; of undefined jquery.validate.min.js:28

    最近在做表单验证时,,自己写的addMethod 方法总是不起作用.折腾了将近一天. 报告的错误,如下面的 Uncaught TypeError: Cannot read property 'call ...

  8. web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo

    背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...

  9. 为网页生成二维码(jquery.qrcode.min.js)

    做网站活动页面的时候,要为每个活动生成一个二维码,虽然简单,但还是习惯记录下来. jquery.qrcode.min.js是js的一个库,主流的浏览器都支持:IE6~10, Chrome, Firef ...

随机推荐

  1. [Sdoi2016]生成魔咒[SAM or SA]

    4516: [Sdoi2016]生成魔咒 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1017  Solved: 569[Submit][Statu ...

  2. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十七:IIC储存模块 - FIFO读写

    . int main() . { . int A: . A = : . } 代码17.1 话题为进入之前,首先让我们来聊聊一些题外话.那些学过软核NIOS的朋友可曾记得,软核NIOS可利用片上内存作为 ...

  3. Mac OS 安装phpMyAdmin

    http://www.coolestguyplanettech.com/installing-phpmyadmin-on-mac-osx-10-7-lion/

  4. Android 使用MediaPlayer 播放 视频

    http://pan.baidu.com/s/1lgKLS package cn.bgxt.surfaceviewdemo; import java.io.File; import android.m ...

  5. AngularJS初始(一)

    什么是AngularJs? angularjs是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用 ...

  6. Thinkphp框架下PHPExcel实现Excel数据的批量化导入导出

    第一步:下载官方的PHPExcel文件,下载地址https://github.com/PHPOffice/PHPExcel 第二步:解压打开,将PHPExcel\Classes\全部文件拷贝到thin ...

  7. [分布式系统学习]阅读笔记 Distributed systems for fun and profit 抽象 之二

    本文是阅读 http://book.mixu.net/distsys/abstractions.html 的笔记. 第二章的题目是"Up and down the level of abst ...

  8. HBase一次客户端读写异常解读分析与优化全过程(干货)

    大数据时代,HBase作为一款扩展性极佳的分布式存储系统,越来越多地受到各种业务的青睐,以求在大数据存储的前提下实现高效的随机读写操作.对于业务方来讲,一方面关注HBase本身服务的读写性能,另一方面 ...

  9. T49

    明天参加媳妇朋友的婚礼.今天晚上的火车,下班后匆忙的打了个的,正好到的哥交接班的时间拦了几辆车都不拉火车站!无奈-五分钟后打上车接上媳妇去火车站!正值五中学生放假路上各种堵!安阳这四线城市什么时候变的 ...

  10. 2018年全国多校算法寒假训练营练习比赛(第一场)闯关的lulu

    闯关的lulu 链接:https://www.nowcoder.com/acm/contest/67/J 来源:牛客网 题目描述 勇者lulu某天进入了一个高度10,000,000层的闯关塔,在塔里每 ...