列表页面head升降序排列

  最近做一个项目，需要给每一个列表页面的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也支持分页

转载于:https://www.cnblogs.com/panshengqiang/archive/2013/04/27/3047987.html