最近做一个项目，需要给每一个列表页面的Head标题做升降序排列处理，主要是利用JS来实现。现在，我们使用Rpeater控件开存放数据源。
开发思路简单如下，首先，把数据源绑定值Repeater中。然后，对Table进行JS处理。
先编写css style.css
* {margin:0; padding:0; outline:none;}
body {font:12px; margin:25px;}
.ShoppingList{100%;}
.sortable {100%; border-left:1px solid #c6d5e1; border-top:1px solid #c6d5e1; border-bottom:none; margin:0 auto 15px}
.sortable th {background-color:#a6d9f4; text-align:center; border:1px solid #fff; border-right:none}
.sortable th h3 {font-size:12px; padding:6px 8px 8px}
.sortable td {padding:4px 6px 6px; border-bottom:1px solid #c6d5e1; border-right:1px solid #c6d5e1}
.sortable .head h3 {background:url(images/sort.gif) 7px center no-repeat; cursor:pointer; padding-left:18px}
.sortable .desc, .sortable .asc {background:url(images/header-selected-bg.gif)}
.sortable .desc h3 {background:url(images/desc.gif) 7px center no-repeat; cursor:pointer; padding-left:18px}
.sortable .asc h3 {background:url(images/asc.gif) 7px center no-repeat; cursor:pointer; padding-left:18px}
.sortable tbody input{border:1px solid #ddd;text-align:center;30px; background: url(images/inputBG.gif) repeat-x;font-size:12px}
.ShoppingList .controls{100%; margin:0 auto; height:20px}
.ShoppingList .perpage{float:left; 200px}
.ShoppingList .perpage select{float:left; font-size:11px}
.ShoppingList .perpage span{float:left; margin:2px 0 0 5px}
.ShoppingList .navigation{float:left; 550px; text-align:center}
.ShoppingList .navigation img{cursor:pointer}
.ShoppingList .page{float:right; text-align:right; margin-top:2px}
.ShoppingList .text{margin-bottom:10px;}
img{border:0;}
.img1{position:relative}
.img2{position:absolute;top:120px;}
.img3{position:absolute;top:220px;}
.img_1 b{text-decoration:underline;font-weight:normal; line-height:18px}
.img_1 b .img_1_h{display:none;}
.img_1 b:hover{zoom:1}
.img_1 b:hover .img_1_h{position:absolute;top:-10px;*top:-7px;left:420px;*left:425px;display:block;z-index:10;}
在编写js script.js
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.table=function(){
function sorter(n){this.n=n; this.pagesize=20; this.paginate=0}
sorter.prototype.init=function(e,f){
var t=ge(e), i=0; this.e=e; this.l=t.r.length; t.a=[];
t.h=T$$('thead',T$(e))[0].rows[0]; t.w=t.h.cells.length;
for(i;i<t.w;i++){
var c=t.h.cells[i];
if(c.className!='nosort'){
c.className=this.head; c.onclick=new Function(this.n+'.wk(this.cellIndex)')
}
}
for(i=0;i<this.l;i++){t.a[i]={}}
if(f!=null){var a=new Function(this.n+'.wk('+f+')'); a()}
if(this.paginate){this.g=1; this.pages()}
};
sorter.prototype.wk=function(y){
var t=ge(this.e), x=t.h.cells[y], i=0;
for(i;i<this.l;i++){
t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].style.display='';
while(v.hasChildNodes()){v=v.firstChild}
t.a[i].v=v.nodeValue?v.nodeValue:''
}
for(i=0;i<t.w;i++){var c=t.h.cells[i]; if(c.className!='nosort'){c.className=this.head}}
if(t.p==y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t.d=t.d?0:1}
else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}
var n=document.createElement('tbody');
for(i=0;i<this.l;i++){
var r=t.r[t.a[i].o].cloneNode(true); n.appendChild(r);
r.className=i%2==0?this.even:this.odd; var cells=T$$('td',r);
for(var z=0;z<t.w;z++){cells[z].className=y==z?i%2==0?this.evensel:this.oddsel:''}
}
t.replaceChild(n,t.b); if(this.paginate){this.size(this.pagesize)}
};
sorter.prototype.page=function(s){
var t=ge(this.e), i=0, l=s+parseInt(this.pagesize);
if(this.currentid&&this.limitid){T$(this.currentid).innerHTML=this.g}
for(i;i<this.l;i++){t.r[i].style.display=i>=s&&i<l?'':'none'}
};
sorter.prototype.move=function(d,m){
var s=d==1?(m?this.d:this.g+1):(m?1:this.g-1);
if(s<=this.d&&s>0){this.g=s; this.page((s-1)*this.pagesize)}
};
sorter.prototype.size=function(s){
this.pagesize=s; this.g=1; this.pages(); this.page(0);
if(this.currentid&&this.limitid){T$(this.limitid).innerHTML=this.d}
};
sorter.prototype.pages=function(){this.d=Math.ceil(this.l/this.pagesize)};
function ge(e){var t=T$(e); t.b=T$$('tbody',t)[0]; t.r=t.b.rows; return t};
function cp(f,c){
var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
i=Date.parse(f); n=Date.parse(c);
if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
return g>h?1:(g<h?-1:0)
};
return{sorter:sorter}
}();
在页面添加js和cs的引用
<script src="../sort/script.js" type="text/javascript"></script>
<link href="../sort/style.css" rel="stylesheet" type="text/css" />
页面主要代码如下：
<div class="ShoppingList">
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr align="center">
<th>
<h3>
序号
</h3>
</th>
<th>
<h3>
类型
</h3>
</th>
<th>
<h3>
标题
</h3>
</th>
<th>
<h3>
上线时间
</h3>
</th>
<th>
<h3>
下线时间
</h3>
</th>
<th>
<h3>
新增时间
</h3>
</th>
<th>
<h3>
操作
</h3>
</th>
</tr>
</thead>
<tbody align="center">
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<tr align="center" id="tr<%#Eval("Oid")%>">
<td>
<%#Container.ItemIndex+1 %>
</td>
<td align="center">
<%#Eval("TypeName")%>
</td>
<td>
<a href="AdInfoEdit.aspx?Oid=<%#Eval("Oid")%>">
<%#Eval("Title")%></a>
</td>
<td>
<%#Eval("OnLineTime")%>
</td>
<td>
<%#Eval("OffLineTime")%>
</td>
<td>
<%#Eval("AdAddTime")%>
</td>
<td>
<a href="AdInfoEdit.aspx?Oid=<%#Eval("Oid")%>" class="hrefEdit t-button" style="min- 30px;"
title="编辑" tag="">编辑</a> <a href="#" class="hrefdel t-button" style="min- 30px;"
tag="<%#Eval("Oid") %>">删除</a>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
<div class="controls">
<div class="perpage">
<span>每页显示的数量：</span>
<select onchange="sorter.size(this.value)" runat="server" id="pageselect">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div class="navigation">
<img src="../images/sort/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
<img src="../images/sort/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
<img src="../images/sort/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
<img src="../images/sort/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
</div>
<div class="page">
页数显示： <span id="currentpage"></span>/ <span id="pagelimit"></span>
</div>
</div>
</div>
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("table", 0);
sorter.size($("#pageselect").val())
</script>
需要提醒的是，页面Table的id要做好对应关系，我这边去Table的id为‘table’，还有js代码 <script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("table", 0);
sorter.size($("#pageselect").val())
</script>要放在body中，才能使用
我们在后台绑定数据给repeter之后就可以对table中的th做自由排序了
我这边就没有给相应的图片，如果有疑问，可以直接告诉我，有需要改进的地方，也可以告诉我，该JS也支持分页