表格排序
jquery的表格排序插件jquery.tablesorter.js，使用简单，排序功能强大，配置灵活，可以自定义排序函数。支持文本，数字，url，IP地址，日期和百分数等数据类型的排序。
html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table sorter1</title>
<link type="text/css" rel="stylesheet" href="blue-themes/style.css"></link>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// call the tablesorter plugin
// $("table").tablesorter();默认对所有列进行排序
/**
// add parser through the tablesorter addParser method
$.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'
});
*/
$("table").tablesorter(
{
// 第一列，第三列直接排序，0：升序；1：降序；
//sortList: [[0,0],[2,1]],
//第四列不排序
headers:{
3:{
sorter:false
}
}
}
);
});
function sortIt(){
var sortColumns = [[4,0],[5,1]];
$("table").trigger("sorton",[sortColumns]);
return false;
}
</script>
</head>
<body>
<table class="tablesorter" cellspacing="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>jan 18, 2001 9:12 am</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>jan 18, 2007 9:12 am</td>
</tr>
</tbody>
</table>
<input type="button" value="sort" onclick="sortIt()">
</body>
</html>
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...