解读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名称。
解读jquery.filtertable.min的更多相关文章
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决
之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...
- 通过jquery.transit.min.js插件,实现图片的移动
首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...
- Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js
引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...
- JSON对象配合jquery.tmpl.min.js插件,手动攒出一个table
jquery.tmpl.min.js 首先下载这个插件 1.绑定json那头的键 //TemplateDDMX 这个是这段JS的ID,这个必须写!!!!!! //${}为json的键的值,必须要填写正 ...
- jquery.qrcode.min.js生成二维码 通过前端实现二维码生成
主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...
- Uncaught TypeError: Cannot read property 'call' of undefined jquery.validate.min.js:28
最近在做表单验证时,,自己写的addMethod 方法总是不起作用.折腾了将近一天. 报告的错误,如下面的 Uncaught TypeError: Cannot read property 'call ...
- web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo
背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...
- 为网页生成二维码(jquery.qrcode.min.js)
做网站活动页面的时候,要为每个活动生成一个二维码,虽然简单,但还是习惯记录下来. jquery.qrcode.min.js是js的一个库,主流的浏览器都支持:IE6~10, Chrome, Firef ...
随机推荐
- 【BZOJ1294】[SCOI2009]围豆豆Bean 射线法+状压DP+SPFA
[BZOJ1294][SCOI2009]围豆豆Bean Description Input 第一行两个整数N和M,为矩阵的边长. 第二行一个整数D,为豆子的总个数. 第三行包含D个整数V1到VD,分别 ...
- python pytest测试框架介绍三
之前介绍了pytest以xUnit形式来写用例,下面来介绍pytest特有的方式来写用例 1.pytest fixture实例1 代码如下 from __future__ import print_f ...
- 使用COSBench工具对ceph s3接口进行压力测试
一.COSBench安装 COSBench是Intel团队基于java开发,对云存储的测试工具,全称是Cloud object Storage Bench 吐槽下,貌似这套工具是intel上海团队开发 ...
- html5 canvas时钟
基础知识点: canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...
- 通过IFeatureClass 接口查询 IWorkspace, 查询通配符
IWorkspace pWsI = ((IDataset)pFtCls).Workspace 查询通配符 ISQLSyntax psqls = (ISQLSyntax)(((IDataset)pFtC ...
- UI自动化--PageObjects(页面对象)
核心的核心:减少了重复代码的数量,减少变更涉及面:做到如果UI发生更改,则只需在一个位置应用此修复程序. PageObject:将页面作为一个对象,进行封装,包括元素定位,封装获取各元素.操作的方法: ...
- hdu 1525 Euclid's Game【 博弈论】
Two players, Stan and Ollie, play, starting with two natural numbers. Stan, the first player, subtra ...
- 【紫书】Play on Words UVA - 10129 欧拉回路
题意:给你1e5个字符串,若前一个的末尾字母等于当前的首字母,则可以连在一起(成语接龙一个意思)判断是否可以将他们连在一起 题解:将首位看作点,单词看作边.变成欧拉回路问题. 判断出入度是否相等,再用 ...
- 【紫书】【重要】Abbott's Revenge UVA - 816 bfs 复杂模拟 带方向参数的迷宫
题意:一个迷宫,每个交叉路口有一路标,限制了你从某方向进入该路口所能进入的路口. 题解:1.对于方向的处理:将node多增加一维dir,通过一个const 字符数组 加 上dir_id函数 以及一个方 ...
- Python:正则表达式概念
#正则表达式内容非常多,网上的学习资源也是目不暇接,我从中筛选学习并且整理出以下 的学习笔记 一.正则表达式匹配过程: 1.依次拿出表达式和文本中的字符比较 2.如果每一个字符都能匹配,则匹配成功:一 ...