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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
js 学习笔记(三)
Dec 29 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
javascript继承机制实例详解
Nov 20 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 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网上调查系统
2006/10/09 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python 异常处理的实例详解
2017/09/11 Python
详解python3中tkinter知识点
2018/06/21 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
长安大学毕业生自我鉴定
2014/01/17 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers