jquery 表格排序、实时搜索表格内容(附图)


Posted in Javascript onMay 19, 2014

jquery 表格排序、实时搜索表格内容(附图)

<table class="table-sort"> 
<thead> 
<tr> 
<th class="table-sort">First Name</th> 
<th class="table-sort">Last Name</th> 
<th class="table-sort">Email</th> 
<th>Phone Number</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Smith</td> 
<td><a href="mailto:john.s">john.s</a></td> 
<td>(613) 873-2982</td> 
</tr> 
<tr> 
<td>Sean</td> 
<td>MacIsaac</td> 
<td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td> 
<td>(613) 871-6191</td> 
</tr> 
<tr> 
<td>Tim</td> 
<td>Zarby</td> 
<td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td> 
<td>(613) 743-5389</td> 
</tr> 
<tr> 
<td>Andrew</td> 
<td>Nichols</td> 
<td><a href="mailto:andy_money2003">andy_money2003</a></td> 
<td>(613) 741-3384</td> 
</tr> 
<tr> 
<td>Ally</td> 
<td>O'Neil</td> 
<td><a href="mailto:allyoneil">allyoneil</a></td> 
<td>(613) 642-9831</td> 
</tr> 
</tbody> 
</table> 
<br/> 
<p>To make a table searchable, add the class 'table-sort-search' to the <table> tag.<br/> 
<br/> 
<strong>Example:</strong></p> 
<pre><code class="html"><table class="table-sort table-sort-search"></table></code></pre> 
<br/> 
<table class="table-sort table-sort-search"> 
<thead> 
<tr> 
<th class="table-sort">First Name</th> 
<th class="table-sort">Last Name</th> 
<th class="table-sort">Email</th> 
<th>Phone Number</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Smith</td> 
<td><a href="mailto:john.s">john.s</a></td> 
<td>(613) 873-2982</td> 
</tr> 
<tr> 
<td>Sean</td> 
<td>MacIsaac</td> 
<td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td> 
<td>(613) 871-6191</td> 
</tr> 
<tr> 
<td>Tim</td> 
<td>Zarby</td> 
<td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td> 
<td>(613) 743-5389</td> 
</tr> 
<tr> 
<td>Andrew</td> 
<td>Nichols</td> 
<td><a href="mailto:andy_money2003">andy_money2003</a></td> 
<td>(613) 741-3384</td> 
</tr> 
<tr> 
<td>Ally</td> 
<td>O'Neil</td> 
<td><a href="mailto:allyoneil">allyoneil</a></td> 
<td>(613) 642-9831</td> 
</tr> 
</tbody> 
</table> 
<br/> 
<p>To make the search text input show the search match count, add the class 'table-sort-show-search-count' to the <table> tag.<br/> 
<br/> 
<strong>Example</strong></p> 
<pre><code><table class="table-sort table-sort-search table-sort-show-search-count"></table></code></pre> 
<br/> 
<table class="table-sort table-sort-search table-sort-show-search-count"> 
<thead> 
<tr> 
<th class="table-sort">First Name</th> 
<th class="table-sort">Last Name</th> 
<th class="table-sort">Email</th> 
<th>Phone Number</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>John</td> 
<td>Smith</td> 
<td><a href="mailto:john.s">john.s</a></td> 
<td>(613) 873-2982</td> 
</tr> 
<tr> 
<td>Sean</td> 
<td>MacIsaac</td> 
<td><a href="mailto:seanjmacisaac">seanjmacisaac</a></td> 
<td>(613) 871-6191</td> 
</tr> 
<tr> 
<td>Tim</td> 
<td>Zarby</td> 
<td><a href="mailto:zarbytown214@hotmail.com">zarbytown214@hotmail.com</a></td> 
<td>(613) 743-5389</td> 
</tr> 
<tr> 
<td>Andrew</td> 
<td>Nichols</td> 
<td><a href="mailto:andy_money2003">andy_money2003</a></td> 
<td>(613) 741-3384</td> 
</tr> 
<tr> 
<td>Ally</td> 
<td>O'Neil</td> 
<td><a href="mailto:allyoneil">allyoneil</a></td> 
<td>(613) 642-9831</td> 
</tr> 
</tbody> 
</table>
Javascript 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 #Javascript
jQuery filter函数使用方法
May 19 #Javascript
用js模拟struts2的多action调用示例
May 19 #Javascript
从零学JS之你需要了解的几本书
May 19 #Javascript
JavaScript在IE和FF下的兼容性问题
May 19 #Javascript
从零学JSON之JSON数据结构
May 19 #Javascript
jquery 选取方法都有哪些
May 18 #Javascript
You might like
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
幼儿园大班毕业感言
2014/02/06 职场文书
行政部岗位职责范本
2014/03/13 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js