jquery.tablesorter.js 学习笔记

jquery.tablesorter.js

　　一般情况下，表格数据的排序方式有两种，第一种是让后端服务将排序后的数据直接输出，另外一种方式就是使用客户端排序，而jquery.tablesorter.js可以满足此需求

实现效果图如下


　　

1.官方地址
jquery.tablesorter.js

2. HTML 结构

<table id="myTable" class="tablesorter">
<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>

3. 需要引入的资源

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

4. 使用demo

$(document).ready(function()

// demo1 : 初始化，使表格可排序
$("#myTable").tablesorter();

// demo1 : 默认第一列，第二列按升序排序
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );

// demo3 : 手动触发排序
$("myTable").trigger("sorton",[[0,0],[2,0]]);

// demo4 : 禁止列排序
$("table").tablesorter({
headers: {
// 列序号默认从0开始
1: {
// 第二列不可排序
sorter: false
},
2: {
sorter: false
}
} ,
// 启用调试模式
debug: true
});

// demo5 : 强制默认排序列
$("table").tablesorter({
// set forced sort on the fourth column and i decending order.
sortForce: [[0,0]]
});

// demo6 : 改变多条件排序使用的辅助键，默认shift
$("table").tablesorter({
sortMultiSortKey: 'altKey' ,
textExtraction: function(node) {
// extract data from markup and return it
return node.childNodes[0].childNodes[0].innerHTML;
}
});

// demo7 : 给table 添加元数据也可达到排序的目的，metadata插件会自动获取类属性
<table cellspacing="1" class="tablesorter {sortlist: [[0,0],[4,0]]}">

// demo8 : 也可以在th的class中指定排序
<tr>
<th class="{sorter: false}">first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<!-- 指定数据解析类型 -->
<th class="{sorter: 'text'}">first name</th>
<th class="{sorter: false}">discount</th>
<th>date</th>
</tr>

// demo9 : 指定sort相关事件
$("table").bind("sortStart",function() {
$("#overlay").show();
}).bind("sortEnd",function() {
$("#overlay").hide();
});

// demo10 : 动态添加数据
$("table tbody").append(html);
// 通知插件需要更新
$("table").trigger("update");
var sorting = [[2,1],[0,0]];
// 触发排序事件
$("table").trigger("sorton",[sorting]);

// demo11 : 修改默认参数
$.tablesorter.defaults.sortList = [[0,0]];

// demo12 : 自定义排序类型
$.tablesorter.addParser({
// set a unique id
id: 'grades',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0);
},
// set type, either numeric or text
type: 'numeric'
});

$(function() {
$("table").tablesorter({
headers: {
6: {
sorter:'grades'
}
}
});
});

// demo14 : 自定义组件
$.tablesorter.addWidget({
// give the widget a id
id: "repeatHeaders",
// format is called when the on init and when a sorting has finished
format: function(table) {
// cache and collect all TH headers
if(!this.headers) {
var h = this.headers = [];
$("thead th",table).each(function() {
h.push(
"" + $(this).text() + ""
);

});
}

// remove appended headers by classname.
$("tr.repated-header",table).remove();

// loop all tr elements and insert a copy of the "headers"
for(var i=0; i < table.tBodies[0].rows.length; i++) {
// insert a copy of the table head every 10th row
if((i%5) == 4) {
$("tbody tr:eq(" + i + ")",table).before(
$("").html(this.headers.join(""))

);
}
}
}
});

// demo15 : 调用插件call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
$("table").tablesorter({
widgets: ['zebra','repeatHeaders']
});

);

5. 注意事项

　　依赖项:jquery

　　meta数据插件: jQuery Metadata 2.1

　　分页插件：jQuery.tablesorter.pager.js

　　css,image 在blue skin 文件夹中可以找到

　　Demo 下载