jQuery 表格排序插件 Tablesorter 使用方式如下:
1.引入头文件(注意一定要把jQuery放在前面):
<script src="lib/jquery-1.8.3.min.js"></script>
<!--tablesorter-->
<link href="css/css_tablesorter_green/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#alltable").tablesorter();
});
</script>
2.在需要使用排序的<Table>上无需做任何设定,很方便:
<table id="alltable" class="tablesorter" width="584">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
在<thead>上就会有两个小三角符号,点击可以用于排序。
Tablesorter下载地址:http://download.csdn.net/detail/leixiaohua1020/6377187
jQuery 表格排序插件 Tablesorter 使用的更多相关文章
-
jQuery表格排序总成-tablesorter
一个.进口单证 <script type="text/javascript" src="js/jquery.js"></script> ...
-
jQuery表格排序组件-tablesorter
一.引入文件 <script type="text/javascript" src="js/jquery.js"></script> & ...
-
jQuery表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...
-
jQuery html表格排序插件:tablesorter
ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...
-
表格排序插件datatables
之前用过表格排序插件tinytables,用到后面,随着需求的更改,发现这个插件真的low到爆了,不适合用于多表格,只有一个表格的页面可以凑合着用,有很多局限性. 之后发现了一款表格排序插件datat ...
-
jquery 表格排序,实时搜索表格内容
jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> < ...
-
表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...
-
一个简洁漂亮的jQuery拖放排序插件DDSort
拖放排序是WEB应用中常见的功能.虽然网上有很多别人已经造好的*,但是就我个人而言,没事就喜欢研究原理,自己造*,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改 ...
-
jquery表格简单插件
1.一直对jquery插件感觉非常神奇.今天动手写了一个超级简单的案例. 2.效果 3.体会 a.jquery插件编写能力. 须要具备一定js能力的编写.还有写css样式的运用:希望以后这方面会有提高 ...
随机推荐
-
常见CSS与HTML使用误区
误区一.多div症 <div class="nav"> <ul> <li><a href="/home/"> ...
-
iOS 图片加载导致内存警告
虽然UITableView和UICollectionView都有cell复用机制,但是如果利用SDWebImage加载的图片本身过大且cell复用池中的个数比较多(cell的Size越小,复用池中的c ...
-
codeforces 712B. Memory and Trident
题目链接:http://codeforces.com/problemset/problem/712/B 题目大意: 给出一个字符串(由'U''D''L''R'),分别是向上.向下.向左.向右一个单位, ...
-
Delphi中的接口和抽象类
参考:http://blog.csdn.net/xinzheng_wang/article/details/6058643 接口:Interface Delphi中接口中的关键字Interface,但 ...
-
【转】打造属于自己的Android Studio神器
本文转载自:http://www.stormzhang.com/android/2015/05/26/android-tools/,并加以修改.黄色底部分是本人添加的内容. 一晃好久没更新博客了,最近 ...
-
android:layout_weight属性的简单使用
效果: style.xml <style name="etStyle2"> <item name="android:layout_width" ...
-
DOM ISO - get current element's XPATH
DOM ISO - get current element's XPATH DOM ISO - get current element's XPATH
-
小妖精的完美游戏教室——人工智能,A*算法,实现篇
//================================================================//// Copyright (C) 2017 Team Saluk ...
-
获取SQL server 中的表和说明
SELECT 表名 = case when a.colorder = 1 then d.name else '' end, 表说明 = case w ...
-
AndroidStudio中builde.gradle文件详解
Android Studio是采用Gradle来构建项目的,一个Android项目中包含两个build.gradle文件,如下图: (1)最外层目录下build.gradle文件 最外层目录下 ...