jQuery排序插件tableSorter
Tablesorter
是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。
主要的特点包括：
支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序
元素的 ROWSPAN 和 COLSPAN 属性
支持第二个隐藏域排序
可扩展外观
程序简小，打包后只有 7.4K
1.先引两个js
注意：表格要用thead/th和tbody。如：
&id="myTable"&&
&&&&&&span color="#ff3407"
style="margin: 0 padding: 0 color: rgb(255, 52,
7);"&th&Email&
&&&&&&span color="#ff3407"
style="margin: 0 padding: 0 color: rgb(255, 52,
7);"&th&Web&Site&
color="#ff3407" style="margin: 0 padding: 0 color: rgb(255,
52, 7);"&tbody&&
3.调用排序js代码
再回到页面点击第一行就可以进行排序了.
&&1.一定要引jQuery包，所有jq插件都是基于jQuery包的
&&2.如果想指定哪一栏不排序这样写
&&&&$("#mytable").tablesorter({headers:{5:{sorter:false}}});
&&&&第5列的sorter为false就OK了
$(document).ready(function(){
&$("#myTable").tablesorter();
$(document).ready(function(){
&$("#myTable").tablesorter(
{sortList: [[0,0], [1,0]]} );
$(document).ready(function(){
&$("#myTable").tablesorter({widthFixed:
widgets: ['zebra']});
$(document).ready(function(){
&$("myTable").tablesorter({
pass the headers argument and assing a object
&&headers:
assign the secound column (we start counting zero)
disable it by setting the property sorter to false
&&&sorter:
assign the third column (we start counting zero)
disable it by setting the property sorter to false
&&&sorter:
$(document).ready(function(){
call the tablesorter plugin/
&$("myTable").tablesorter({
set forced sort on the fourth column and i decending
&&sortForce:
$(document).ready(function(){
call the tablesorter plugin
&$("table").tablesorter({
change the multi sort key from the default shift to alt
&&sortMultiSortKey:
$(document).ready(function(){
&$("myTable").tablesorter({widthFixed:
widgets: ['zebra']})
&&.tablesorterPager({container:
$("#pager")});
&Last&Name
&First&Name
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。使用jquery的tablesorter插件进行表格排序
使用方法：
1.下载tablesorter &
2.解压文件，将jquery和jquery.tablesorter.min.js导入到项目文件中
3.修改html：
& & 1）添加链接
&script type=&text/javascript& src='/pagemedia/js/jquery.tablesorter.min.js'&&/script& &
&script type=&text/javascript& src='/pagemedia/js/jquery.min.js'&&/script& &
& &2）修改表格
&table id=&myTable& &class='tablesorter'& &
为table添加id和class，class为tablesorter.（注意：table必须有thead和tbody）
& &3）添加javascript脚本：
&script& &
$(document).ready(function(){ &
& & &$(&#myTable&).tablesorter(); & & &&
&/script& &jQuery表格tablesorter插件排序功能特效代码_js特效_中国素材天下
下载次数：1065
需要积分：0
下载地址：
下载说明：
1、同时下载多个文件，容易出现无法解压等情况。请大家下载完成一个文件后再下载另一个。
2、部分素材需要解压密码，请输入：niutuku 。
3、为节约资源，有部分PSD文件已关闭全部图层，下载后请使用Photoshop打开图层眼睛即可。
4、登录后可获得更多便利功能，如未注册，请先注册。
5、日历，台历，挂历等方面的素材请仔细核对后再使用，我们无法保证每个素材的日期时间都是正确的。请慎重！！！！
6、特别说明：本站"设计素材"栏目内的所有资源（包括素材、软件、资料等）仅供学习与参考，请勿用于商业用途。jQuery html表格排序插件tablesorter使用方法详解_Jquery_ThinkSAAS
jQuery html表格排序插件tablesorter使用方法详解
jQuery html表格排序插件tablesorter使用方法详解
内容来源： 网络
tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序，会自动识别表格内容数据类型，使用也非常方便。
使用jQuery tablesort实现html表格方法:
1. 下载jQuery和tablesort脚本，并在html中引用该脚本文件：
&script type="text/javascript" src="../jquery-latest.js"&&/script&
&script type="text/javascript" src="../jquery.tablesorter.js"&&/script&
2. 格式化需要排序的html表格：
a. 给需要排序的表格指定CCS类：class="sort-table"
b. 使用thead和tbody标签来标记表格头和表格正文
c. 在表格头thead中需要使用th标签定义表头
格式化好的html表格如下所示：
&table border=1 width="800px" class="sort-table"&
&thead&
&th&Date&/th&
&th&Usage&/th&
&th&Cost&/th&
&th&Remain&/th&
&/tr&
&/thead&
&tbody&
&td&&/td&
&td&book place @dhgu&/td&
&td&-40&/td&
&td&-40&/td&
&/tr&
&td&&/td&
&td&book place @dhgu&/td&
&td&-40&/td&
&td&-80&/td&
&/tr&
&/tbody&
&/table&
3. 添加jQuery代码，启用html表格排序：
在body中对在第二步中指定的排序表格css类调用tablesorter()函数：
&body&
&script type="text/javascript"&
$(document).ready(function() {
$(".sort-table").tablesorter(); 
&/script&
通过上面的3步，jQuery tablesort就可以实现对html表格的排序。
下载jQuery插件tablesort
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信表格排序——jQuery插件tablesorter的使用
表格排序——jQuery插件tablesorter的使用
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。
主要的特点包括：
1.引入头文件
注意：jquery一定要放在tablesorter之前
&title&jquery.tablesorter&/title&
&script language=&JavaScript& type=&text/javascript& src=&jquery-1.8.3.min.js&&&/script&
&script language=&JavaScript& type=&text/javascript& src=&jquery.tablesorter.min.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&styles/tablesorter/tablesorter.css& media=&all& /&
2.创建表格
注意：表格中需要用&thead&&th&&thead&来指明才可以完成排序,表格加上class=&tablesorter&是css设定的样式。
&table id=&tablesorter& border=&1& class=&tablesorter&&
&th&编号&/th&
&th&姓名&/th&
&th&年龄等级&/th&
&th&性别&/th&
&tr&&td&1&/td&&td&张三&/td&&td&青年&/td&&td&男&/td&&/tr&
&tr&&td&2&/td&&td&李四&/td&&td&老年&/td&&td&男&/td&&/tr&
&tr&&td&3&/td&&td&王五&/td&&td&中年&/td&&td&男&/td&&/tr&
注意：其中tablesorter是表格的Id，
3.1实现简单排序：
jQuery(function($){
$(&#tablesorter&).tablesorter();
});这时点击表头的编号，姓名就可以进行升序降序排列了，
3.2将指定列进行排序：
如果不想让某一列也进行排序只需要在jQuery代码中写入：（即第一列、第二列不需要排序）
jQuery(function($){
$(&#sortTable&).tablesorter({
0:{sorter:false},
1:{sorter:false}
3.3自定义排序规则：
如点击年龄等级，我们希望的顺序是青、中、老排序。可将中文替换成数字，我们通过数字排序来控制中文排序，代码如下：
$.tablesorter.addParser({
id: &grade&, //指定一个唯一的ID
is: function(s){
format: function(s){
return s.toLowerCase().replace(/青/,1).replace(/中/,2).replace(/老/,3); //将中文换成数字
type: &numeric& //按数值排序
jQuery(function($){
$(&#sortTable&).tablesorter({
0:{sorter:false},
1:{sorter:false},
2:{sorter:&grade&}//将第3列（年龄等级）按前面定义的grade方式排序
});3.4使用链接对排序进行控制：
& & & & & & & &在table后面加一个链接，代码：&a href=&#& id=&trigger&&按年龄等级排列&/a&
& & & & & & & &用jquery模拟点击事件来控制，代码为：
$(&#trigger&).click(function(){
var t=$(&thead tr&).children(); //取得thead下的tr的所有子元素
$(t[2]).trigger(&click&);//模拟年龄等级点击事件
附加补充：
摘自：/school/Javascript/392.html
在使用过程遇到的一个问题，我的表格数据是通过ajax获取的，首页进行排序的时候没问题当进行下一页排序的时候，会把上页的数据也重新显示出来，解决这个问题可以在你ajax获取数据之后触发&update&事件，代码如下：&
$(&.tablesorter&).trigger(&update&);
我的热门文章
即使是一小步也想与你分享}