可翻页排序的表格：Make all your tables sortable - 启步网（7ibu.com）网络、IT(挨踢)职业游民学习娱乐之家.

启步网 > 网站建设 > 网页制作

可翻页排序的表格：Make all your tables sortable

作者： sunhy 阅读：来源：启步网时间：2007-2-1 23:48:47

字体：小中大

原文：sorttable: Make all your tables sortable

这是一个Javascript 的类库，用于table内容排序。

使用很方便，不用每次都去调用数据库。

特别适合多表查询的排序。

加上<tbody>的style.display 切换，也可以实现分页。

这里提供： sorttable.js 文件下载。

要实现以上功能只需三步即可完成：

1，Include the Javascript library, by putting a link to it in the HEAD of your page, like so:
<script src="/developer/programme/js/sorttable.js"></script>

2，Mark your table as a sortable one by giving it a class of "sortable":
<table class="sortable">

3，Ensure that your table has an ID:
<table class="sortable" id="unique_id">

即：

1，添加JS
<SCRIPT src="/developer/programme/js/sorttable.js" type="text/javascript"></SCRIPT>
2，添加TABLE,注意的是：一定要有ID,class为"sortable"
<table class="sortable" id="mytable">

3，保证table里含有上面定义的ID

详细实现代码如下，请运行查看效果。（你可以先修改代码再执行）

<html><HEAD><TITLE>sort table</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>a {	color:#000000;	font-weight: bold;	text-decoration: none;}</STYLE>

<SCRIPT src="/developer/programme/js/sorttable.js"></SCRIPT>
</HEAD>
<BODY>
<P>点击标题体验排序效果：</P>
<TABLE class=sortable id=mytable cellSpacing=3 cellPadding=0 width=481 border=1>
<TBODY>
<TR>
<TH width=165><A class=sortheader onclick="ts_resortTable(this, 0);return false;" href="#">Name<SPAN class=sortarrow></SPAN></A></TH>
<TH width=101><A class=sortheader onclick="ts_resortTable(this, 1);return false;" href="#">Salary<SPAN class=sortarrow></SPAN></A></TH>
<TH align=middle width=101><A class=sortheader onclick="ts_resortTable(this, 2);return false;" href="#">Extension<SPAN class=sortarrow></SPAN></A></TH>
<TH align=middle width=99><A class=sortheader onclick="ts_resortTable(this, 3);return false;" href="#">Start date<SPAN class=sortarrow></SPAN></A></TH></TR>
<TR>
<TD>Bloggs, Fred</TD>
<TD>$12000.00</TD>
<TD align=middle>1353</TD>
<TD align=middle>18/08/2003</TD></TR>
<TR>
<TD>Turvey, Kevin</TD>
<TD>$191200.00</TD>
<TD align=middle>2342</TD>
<TD align=middle>02/05/1979</TD></TR>
<TR>
<TD>Mbogo, Arnold</TD>
<TD>$32010.12</TD>
<TD align=middle>2755</TD>
<TD align=middle>09/08/1998</TD></TR>
<TR>
<TD>Shakespeare, Bill</TD>
<TD>$122000.00</TD>
<TD align=middle>3211</TD>
<TD align=middle>12/11/1961</TD></TR>
<TR>
<TD>Shakespeare, Hamnet</TD>
<TD>$9000</TD>
<TD align=middle>9005</TD>
<TD align=middle>01/01/2002</TD></TR>
<TR>
<TD>Fitz, Marvin</TD>
<TD>$3300</TD>
<TD align=middle>5554</TD>
<TD align=middle>22/05/1995</TD></TR></TBODY></TABLE>
<P><A href="http://www.7ibu.com" target=_blank>Sunhy's Web</A></P><P><A href="http://www.7ibu.com/rss.asp" target=_blank>点此订阅，获取更多相关资源</A></P></BODY></html>

责任编辑：一路狂奔

帐号：
密码：

Google提供的相关资源