表格排序

       jquery的表格排序插件jquery.tablesorter.js,使用简单,排序功能强大,配置灵活,可以自定义排序函数。支持文本,数字,url,IP地址,日期和百分数等数据类型的排序。

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table sorter1</title>
<link type="text/css" rel="stylesheet" href="blue-themes/style.css"></link>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {   
 // call the tablesorter plugin

// $("table").tablesorter();默认对所有列进行排序

/**

 
    // add parser through the tablesorter addParser method 
    $.tablesorter.addParser({ 
        // set a unique id 
        id: 'grades'
        is: function(s) { 
            // return false so this parser is not auto detected 
            return false
        }, 
        format: function(s) { 
            // format your data for normalization 
            return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0); 
        }, 
        // set type, either numeric or text 
        type: 'numeric' 
    });

*/
 $("table").tablesorter(
  {  
    // 第一列,第三列直接排序,0:升序;1:降序;
   //sortList: [[0,0],[2,1]],
   //第四列不排序
   headers:{
    3:{
     sorter:false
    }
   }
  }
 );
});

function sortIt(){
 var sortColumns = [[4,0],[5,1]];
  $("table").trigger("sorton",[sortColumns]);
  return false;
}
</script>
</head>
<body>
 <table class="tablesorter" cellspacing="1">
  <thead>
   <tr>
    <th>first name</th>
    <th>last name</th>
    <th>age</th>
    <th>total</th>
    <th>discount</th>
    <th>date</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>peter</td>
    <td>parker</td>
    <td>28</td>
    <td>$9.99</td>
    <td>20%</td>
    <td>jul 6, 2006 8:14 am</td>
   </tr>
   <tr>
    <td>john</td>
    <td>hood</td>
    <td>33</td>
    <td>$19.99</td>
    <td>25%</td>
    <td>dec 10, 2002 5:14 am</td>
   </tr>
   <tr>
    <td>clark</td>
    <td>kent</td>
    <td>18</td>
    <td>$15.89</td>
    <td>44%</td>
    <td>jan 12, 2003 11:14 am</td>
   </tr>
   <tr>
    <td>bruce</td>
    <td>almighty</td>
    <td>45</td>
    <td>$153.19</td>
    <td>44%</td>
    <td>jan 18, 2001 9:12 am</td>
   </tr>
   <tr>
    <td>bruce</td>
    <td>evans</td>
    <td>22</td>
    <td>$13.19</td>
    <td>11%</td>
    <td>jan 18, 2007 9:12 am</td>
   </tr>
  </tbody>
 </table>
 <input type="button" value="sort" onclick="sortIt()">
</body>
</html>

你可能感兴趣的:(表格排序)