设为首页收藏本站新闻投稿

MOD中国同盟社

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 763|回复: 0

[教程] 用jquery实现表格列排序 [复制链接]

Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20

帖子
2836
精华
2
声望
12984 点
金币
2999 Mold
被赞许
28 次
注册时间
2006-4-28

Mod中国同盟社至高荣誉

发表于 2011-9-24 12:38:55 |显示全部楼层
  1. $(document).ready(function()
  2. {   
  3.     //插件的形式
  4.     jQuery.fn.alterRowColors = function()
  5.     {
  6.         $('tbody tr:odd', this).removeClass('even').addClass('odd');
  7.         $('tbody tr:even', this).removeClass('odd').addClass('even');
  8.         return this;
  9.     }
  10.     //1.此时的函数是作为jQuery.fn的一个新属性定义的,不是孤立的函数,这样就把该函数注册成了一个插件,
  11.     //2.使用关键字this,在一个插件内部,this表示的是调用该插件的jQuery对象,
  12.     //3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。
  13.    
  14.     var $sortOrder = 0;   //排序类型 1表示升序,0表示降序
  15.     var $table = $('table#shop');

  16.     $table.alterRowColors();

  17.     $('th', $table).each(function( column )
  18.     {
  19.         //处理三种有可能存在的排序字段,比较方法
  20.         var findSortKey;
  21.         if( $(this).is('.sort-title') || $(this).is('.sort-author') )
  22.         {
  23.             findSortKey = function( $cell )
  24.             {
  25.                 return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase();
  26.             }
  27.         }
  28.         else if( $(this).is('.sort-date') )
  29.         {
  30.             findSortKey = function( $cell )
  31.             {
  32.                 return Date.parse('1' + $cell.text());
  33.             }
  34.         }
  35.         else if( $(this).is('.sort-price') )
  36.         {
  37.             findSortKey = function( $cell )
  38.             {
  39.                 var key =  parseFloat($cell.text().replace(/^[^\d.]*/, ''))
  40.                 return isNaN(key) ? 0 : key;
  41.             }
  42.         }
  43.         
  44.         //排序
  45.         if( findSortKey )
  46.         {
  47.             $(this).addClass('clickable').hover(function()
  48.             {
  49.                 $(this).addClass('hover');
  50.                 var $title = $sortOrder == 0 ? '升序' : '降序';
  51.                 $(this).attr('title', '按'+  $(this).html() + $title +'排列');
  52.             }, function()
  53.             {
  54.                 $(this).removeClass('hover');
  55.             }).click(function()
  56.             {
  57.                 $sortOrder = $sortOrder == 0 ? 1 : 0;
  58.                
  59.                 var rows = $table.find('tbody > tr').get();
  60.                
  61.                 $.each( rows, function( index, row )
  62.                 {
  63.                     row.sortKey = findSortKey($(row).children('td').eq(column));
  64.                 });
  65.                 //排序方法
  66.                 rows.sort(function( a, b )
  67.                 {
  68.                     if( $sortOrder == 1 )
  69.                     {
  70.                         //升序
  71.                         if(a.sortKey < b.sortKey)   return -1;
  72.                         if(a.sortKey > b.sortKey)   return  1;                    
  73.                         return 0;
  74.                     }
  75.                     else
  76.                     {
  77.                         //降序
  78.                         if(a.sortKey < b.sortKey)   return  1;
  79.                         if(a.sortKey > b.sortKey)   return -1;                    
  80.                         return 0;
  81.                     }                    
  82.                 });
  83.                 //排序后的对象添加给$table
  84.                 $.each( rows, function( index, row )
  85.                 {
  86.                     $table.children('tbody').append(row);
  87.                     row.sortKey = null;
  88.                 });
  89.                
  90.                 //显著标明是通过某一列排序的
  91.                 $table.find('td').removeClass('sorted')
  92.                     .filter(':nth-child('+ (column + 1) +')').addClass('sorted');
  93.                     
  94.                 //重新赋予奇偶行的样式
  95.                 $table.alterRowColors();
  96.             });
  97.         }  
  98.     });
  99.    
  100.     //分页效果
  101.     var currentPage = 0;  //当前页
  102.     var pageSize = 10;  //每页行数(不包括表头)
  103.     //绑定分页事件
  104.     $table.bind('repaginate', function()
  105.     {
  106.         $table.find('tbody tr').hide()
  107.             .slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
  108.     });

  109.     var numRows = $table.find('tbody tr').length;  //记录宗条数
  110.     var numPages = Math.ceil(numRows/pageSize);    //总页数
  111.    
  112.     var $pager = $('<div class="page"></div>');  //分页div
  113.     for( var page = 0; page < numPages; page++ )
  114.     {
  115.         //为分页标签加上链接
  116.         $('<a href="#" ><span>'+ (page+1) +'</span></a>')
  117.             .bind("click", { "newPage": page }, function(event)
  118.             {           
  119.                 currentPage = event.data["newPage"];                  
  120.                 $table.trigger("repaginate");            
  121.             })
  122.            .appendTo($pager);
  123.          
  124.         $pager.append("  ");
  125.     }
  126.     $pager.insertAfter($table);    //分页div插入table
  127.    
  128.     $table.trigger("repaginate");  //初始化   
  129.    
  130. });
复制代码


使用道具 举报

您需要登录后才可以回帖 登录 | 注册

回顶部