最近做一个项目，需要给每一个列表页面的Head标题做升降序排列处理，主要是利用JS来实现。现在，我们使用Rpeater控件开存放数据源。
开发思路简单如下，首先，把数据源绑定值Repeater中。然后，对Table进行JS处理。
先编写css style.css
* {margin:0; padding:0; outline:none;}
body {font:12px; margin:25px;}.ShoppingList{width:100%;}
.sortable {width: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;width:30px; background: url(images/inputBG.gif) repeat-x;font-size:12px} .ShoppingList .controls{width:100%; margin:0 auto; height:20px}.ShoppingList .perpage{float:left; width:200px}.ShoppingList .perpage select{float:left; font-size:11px}.ShoppingList .perpage span{float:left; margin:2px 0 0 5px}.ShoppingList .navigation{float:left; width: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.οnclick=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-width: 30px;" title="编辑" tag="">编辑</a> <a href="#" class="hrefdel t-button" style="min-width: 30px;" tag="<%#Eval("Oid") %>">删除</a> </td> </tr> </ItemTemplate> </asp:Repeater> </tbody> </table> <div class="controls"> <div class="perpage"> <span>每页显示的数量：</span> <select οnchange="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" οnclick="sorter.move(-1,true)" /> <img src="../images/sort/previous.gif" width="16" height="16" alt="First Page" οnclick="sorter.move(-1)" /> <img src="../images/sort/next.gif" width="16" height="16" alt="First Page" οnclick="sorter.move(1)" /> <img src="../images/sort/last.gif" width="16" height="16" alt="Last Page" οnclick="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也支持分页