jQuery插件之表格排序(转后完善)

最新推荐文章于 2019-08-21 16:12:31 发布

失落的羔羊

最新推荐文章于 2019-08-21 16:12:31 发布

阅读量565

点赞数

分类专栏： JavaScript 文章标签： jquery插件

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

有时间可以研究下这个插件,比较复杂! 表格排序jquery插件地址http://tablesorter.com/docs/

转作者的代码后进行了修改与优化!修复隐藏列排序的BUG!

对html表格进行排序的一个JQ插件

js代码如下：

/**
 * 对表格进行排序
 * @author yxd
 * @version 1.0
 * @argument 待排序的table的id和图片的路径
 * 用法：
 *    1、导入jquery-1.4.2.js
 *    2、导入sorttable.js
 *    3、在页面的onload中调用jQuery.sortTable({tableId:"tableId",imgPath:""});
 *    4、需要两个图片，路径：icon_comn_sortdown.gif和icon_comn_sortup.gif
 *    5、对于不需要排序的列，用class="noSort"标记
 * 注意：要求待排序的表格具有thead和tbody   
 */
jQuery.extend({
  sortTable:
  function(args){
      var $=jQuery,
       table=$("#"+args.tableId),
       allTr=$("tbody > tr",table).get(),
       img=$("<image src='' style='margin-left:5'/>"),
       tHead=$("thead > tr >th",table).not($(".noSort"));
   if(tHead.length==0){
    tHead=$("thead > tr >td",table).not($(".noSort"));
   }

   tHead.each(function(){
    $(this).data("dir",1)//排序的方向
        .data("index",$(this).prevAll("td:visible").length)//计算每一列的绝对列
           .css("cursor","pointer")
        .attr("title","单击排序")
        .click(function(){
       _$this=$(this);
       allTr.sort(function(a,b){
        var td1=$(a).children("td").eq(_$this.data("index")).text();
        td1=isNaN(Number(td1))?td1:Number(td1);    
        var td2=$(b).children("td").eq(_$this.data("index")).text();
        td2=isNaN(Number(td2))?td2:Number(td2);   
        var dir=_$this.data("dir");
        if(td1>td2){
         return dir;
        }else if(td1<td2){
         return -dir;
        }else{
         return 0;
        }
       });
       $(this).data("dir",-$(this).data("dir"));
       $(allTr).each(function(){
        $("tbody",table).append($(this));
       });        ;
       $(this).append(img.attr("src",args.imgPath+($(this).data("dir")==1?"icon_comn_sortdown":"icon_comn_sortup")+".gif"));
        });
   });
  }
 });

 

 

示例的html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="jquery-1.3.2.js"></script>
  <script type="text/javascript" src="sorttable.js"></script>
  <script type="text/javascript">
  <!--
   jQuery(function($){
  $.sortTable({tableId:"t1",imgPath:"image/"});
   });
  //-->
  </script>
 </head>

 <body>
 <table id="t1" border="1">
     <thead id="thead">
   <tr>
    <td class="noSort">姓名</td>
    <td>年龄</td>
    <td>城市</td>
   </tr>
  </thead>
  <tbody id="tbody">
   <tr>
    <td>aa</td>
    <td>25</td>
    <td>luoyang</td>
   </tr>
   <tr>
    <td>bb</td>
    <td>23</td>
    <td>yuncheng</td>
   </tr>
   <tr>
    <td>cc</td>
    <td>10</td>
    <td>luoyang</td>
   </tr>
   <tr>
    <td>dd</td>
    <td>45</td>
    <td>henan</td>
   </tr>
   <tr>
    <td>dd</td>
    <td>8</td>
    <td>henan</td>
   </tr>
        </tbody>
 </table>
 
 </body>
</html>

使用效果如下图：