使用 jqeury 插件 tablesorter 排序 

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>StripingTable</title>
 <script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> 
 <script src="jquery.tablesorter.js" type="text/javascript"></script> 
 <script type="text/javascript">
 $().ready(function(){
     formatTable("tb");
 })
 
 //var sortCol;
 var storeTable = {

  sortCol:null,

  storeTableByColIndex:function(sTableId,colIndex,sType){

   var oTable = $("#" + sTableId);  //$("#id")
   var trList = oTable.find("tbody>tr"); //$("tbody>tr")
   var arrTr = trList.get(); 
   alert(storeTable.sortCol);
   alert(colIndex);
   if(storeTable.sortCol==colIndex)
   {
     alert("reverse");
      arrTr.reverse();
   }
   else 
   {
      
      arrTr.sort(storeTable.generateCompareTrs(colIndex,sType));
   }

   oTable.find("tbody").html($(arrTr));

   storeTable.sortCol = colIndex;

   formatTable(sTableId);//格式化Table
  },


  convert:function(sValue,sDataType){
       switch(sDataType)
       {
            case "int":
             return parseInt(sValue,10);
             break;
            case "float":
             return parseFloat(sValue);
             break;
            case "date":
             return new Date(Date.parse(sValue));
             break;
            default:
             return sValue.toString();
       }
  },

  generateCompareTrs:function(iCol,sDataType){
   return  function compareTrs(oTr1,oTr2)
   {
      var vValue1 = storeTable.convert(oTr1.children[iCol].innerText,sDataType);  //转换类型
      var vValue2 = storeTable.convert(oTr2.children[iCol].innerText,sDataType);  //转换类型
        if(vValue1 < vValue2) //比较大小
        {
         return -1;
        }
        else if(vValue1> vValue2)
        {
         return 1;
        }
        else
        {
         return 0;
        }
   }
  }
 }


 //设置页面样式 
 function formatTable(sTableId){

   $("#"+sTableId).find("tbody>tr").removeClass("alt");

   $(".stripe tr").mouseover(function(){  //jquery .stripe tr mouseover 

   $(this).addClass("over");}).mouseout(function(){  //jquery .mouseout 

   $(this).removeClass("over");});

   $(".stripe tr:even").addClass("alt");
 }
 </script>




 <style>
 th {
  cursor:hand;
  background:#0066FF;
  color:#FFFFFF;
  line-height:20px;
  height:30px;
 }
  
 td {
  padding:6px 11px;
  border-bottom:1px solid #95bce2;
  vertical-align:top;
  text-align:center;
 }
  
 td * {
   padding:6px 11px;
 }
  
 tr.alt td {
  background:#ecf6fc;  /*这行将给所有的tr加上背景色*/
 }
  
 tr.over td {
  background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/
 }
 </style>


 </head>
 
 <body>



  <table id="tb" class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"> 
  <!--用class="stripe"来标识需要使用该效果的表格-->
  <thead>
    <tr>
    <th onclick="storeTable.storeTableByColIndex('tb',0)">name</th>
    <th onclick="storeTable.storeTableByColIndex('tb',1,'int')">age</th>
    <th onclick="storeTable.storeTableByColIndex('tb',2,'int')">QQ</th>
    <th onclick="storeTable.storeTableByColIndex('tb',3,'date')">Email</th>
    </tr>
  </thead>


  <tbody>
   <tr>
   <td>jack</td>
   <td>23</td>
   <td>31540201</td>
   <td>2007/1/1</td>
    </tr>
    <tr>
   <td>jack</td>
   <td>2</td>
   <td>31540201</td>
   <td>2007/1/2</td>
    </tr>
    <tr>
   <td>jack</td>
   <td>20</td>
   <td>31540203</td>
   <td>2007/4/1</td>
    </tr>
    <tr>
   <td>jack</td>
   <td>190</td>
   <td>31540204</td>
   <td>2007/3/1</td>
    </tr>
    <tr>
   <td>jack</td>
   <td>100</td>
   <td>31540204</td>
   <td>2007/5/1</td>
    </tr>
  </tbody>
  </table>
 </body>
</html>
posted @ 2011-06-29 23:25  jackyong  阅读(487)  评论(0)  编辑  收藏  举报