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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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 Smarty 字符比较代码
2011/02/27 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python requests模块实例用法
2019/02/11 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
简单了解python的break、continue、pass
2019/07/08 Python
pytorch中的inference使用实例
2020/02/20 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
PHP开发的一般流程
2013/08/13 面试题
房地产促销活动方案
2014/03/01 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
公司员工体检通知
2015/04/21 职场文书
小平您好观后感
2015/06/09 职场文书
公司周年庆典致辞
2015/07/30 职场文书