因为项目要求，进行了前期的技术调查和学习，今天了解有排序功能的表格。存在一个问题，这个排序功能只能将页面上显示的数据进行排序，如果结合分页会存在问题。
Table Sorter Plugin - 把一个标准的HTML表格分解成Thead和Tbody标签构成的分类表格，不需要刷新。它能够成功地解析和整理多种类型的数据，包括联系资料。
在JSP页面里，要导入jquery-latest.jsp和jquery.tablesorter.jsp。可以在http://tablesorter.com/docs/#Demo里下载，同里这个页面里也详细的说明了，这个表格插件的使用。
以下的代码是我学习后，自己写的例子。
sortlist.jsp
1
<%
@page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>2
3
<html>4
<head>5
6
<title>static tree view</title>7
<link rel="stylesheet" href = "css/table.css">8
9
<script type="text/javascript" src="../js/jquery-latest.js"></script>10
<script type="text/javascript" src="../js/jquery.tablesorter.js"></script>11
12
13
<script type="text/javascript">14
$(document).ready(function() { 15
$("#myTable").tablesorter({sortList:[[0,0],[2,1]],//初次进入页面时，每一项升，每三项降进行排序显示。16
widgets: ['zebra'],17
headers: {4:{sorter: false}}//第5项不用排序18
}); 19
} ); 20
21
</script>22
</head>23
24
<body>25
26
27
<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1">28
<thead>29
<tr>30
<th>Last Name</th>31
<th>First Name</th>32
<th>Email</th>33
<th>Due</th>34
<th>Web Site</th>35
</tr>36
</thead>37
<tbody>38
<tr>39
<td>Smith</td>40
<td>1</td>41
<td>jsmith@gmail.com</td>42
<td>$50.00</td>43
<td>http://www.jsmith.com</td>44
</tr>45
<tr>46
<td>Bach</td>47
<td>2</td>48
<td>fbach@yahoo.com</td>49
<td>$50.00</td>50
<td>http://www.frank.com</td>51
</tr>52
<tr>53
<td>Doe</td>54
<td>5</td>55
<td>jdoe@hotmail.com</td>56
<td>$100.00</td>57
<td>http://www.jdoe.com</td>58
</tr>59
<tr>60
<td>Conway</td>61
<td>3</td>62
<td>tconway@earthlink.net</td>63
<td>$50.00</td>64
<td>http://www.timconway.com</td>65
</tr>66
</tbody>67
</table>68
69
</body>70
</html>71
表格的样式在table.css里定义：
css/table.css
1
/**//* tables */2
table.tablesorter {}{3
font-family:arial;4
background-color: #CDCDCD;5
margin:10px 0pt 15px;6
font-size: 8pt;7
width: 100%;8
text-align: left;9
}10
table.tablesorter thead tr th, table.tablesorter tfoot tr th {}{11
background-color: #e6EEEE;12
border: 1px solid #FFF;13
font-size: 8pt;14
padding: 4px;15
}16
table.tablesorter thead tr .header {}{17
background-image: url(../image/common/table/bg.gif);18
background-repeat: no-repeat;19
background-position: center right;20
cursor: pointer;21
}22
table.tablesorter tbody td {}{23
color: #3D3D3D;24
padding: 4px;25
background-color: #FFF;26
vertical-align: top;27
}28
table.tablesorter tbody tr.odd td {}{29
background-color:#F0F0F6;30
}31
table.tablesorter thead tr .headerSortUp {}{32
background-image: url(../image/common/table/asc.gif);33
}34
table.tablesorter thead tr .headerSortDown {}{35
background-image: url(../image/common/table/desc.gif);36
}37
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {}{38
background-color: #8dbdd8;39
}40
41
42
扫一扫
4479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
