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中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
详解ES6中的let命令
Apr 05 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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 header功能的使用
2013/10/28 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
客房主管岗位职责
2013/12/09 职场文书
给海归自荐信的建议
2013/12/13 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
吴仁宝观后感
2015/06/09 职场文书
生日赠语
2015/06/23 职场文书
教师节晚会主持词
2015/06/30 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
使用Python获取字典键对应值的方法
2022/04/26 Python