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

MOD中国同盟社

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 649|回复: 0

[教程] jquery 表格排序代码 [复制链接]

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

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

Mod中国同盟社至高荣誉

发表于 2011-10-25 22:28:35 |显示全部楼层
jquery 表格排序代码,做成了插件的形式、在排序时隔行变色,可以按字母排序、数字排序等。
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <title>jquery 表格排序</title>
  4.     <style type="text/css">
  5.         thead
  6.         {
  7.             background-color: Blue;
  8.             color: White;
  9.         }
  10.         tr.odd
  11.         {
  12.             background-color: #ddd;
  13.         }
  14.         tr.even
  15.         {
  16.             background-color: #eee;
  17.         }
  18.         .clickable
  19.         {
  20.             text-decoration: underline;
  21.         }
  22.         .hover
  23.         {
  24.             background-color: #5dd354;
  25.         }
  26.         .sorted
  27.         {
  28.             background-color: #ded070;
  29.         }
  30.         .page-number
  31.         {
  32.             color: Black;
  33.             margin:2px 10px;
  34.             padding:2px 5px;
  35.         }
  36.         .active
  37.         {
  38.             border:solid 1px red;
  39.             background-color:#76a7d2;
  40.             }
  41.         .pager
  42.         {
  43.             margin-bottom:10px;
  44.             margin-left:20px;
  45.             }
  46.     </style>
  47.     <script type="text/javascript" language="javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
  48.     <script type="text/javascript" language="javascript">
  49.         $(function() {
  50.             jQuery.fn.alternateRowColors = function() {                      //做成插件的形式
  51.                 $('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变色 奇数行
  52.                 $('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变色 偶数行
  53.                 return this;
  54.             };

  55.             $('table.myTable').each(function() {
  56.                 var $table = $(this);                       //将table存储为一个jquery对象
  57.                 $table.alternateRowColors($table);          //在排序时隔行变色

  58.                 $('th', $table).each(function(column) {
  59.                     var findSortKey;
  60.                     if ($(this).is('.sort-alpha')) {       //按字母排序
  61.                         findSortKey = function($cell) {
  62.                             return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();
  63.                         };
  64.                     } else if ($(this).is('.sort-numeric')) {       //按数字排序
  65.                         findSortKey = function($cell) {
  66.                             var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));
  67.                             return isNaN(key) ? 0 : key;
  68.                         };
  69.                     } else if ($(this).is('.sort-date')) {          //按日期排序
  70.                         findSortKey = function($cell) {
  71.                             return Date.parse('1 ' + $cell.text());
  72.                         };
  73.                     }

  74.                     if (findSortKey) {
  75.                         $(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }).click(function() {
  76.                             //反向排序状态声明
  77.                             var newDirection = 1;
  78.                             if ($(this).is('.sorted-asc')) {
  79.                                 newDirection = -1;
  80.                             }
  81.                             var rows = $table.find('tbody>tr').get(); //将数据行转换为数组
  82.                             $.each(rows, function(index, row) {
  83.                                 row.sortKey = findSortKey($(row).children('td').eq(column));
  84.                             });
  85.                             rows.sort(function(a, b) {
  86.                                 if (a.sortKey < b.sortKey) return -newDirection;
  87.                                 if (a.sortKey > b.sortKey) return newDirection;
  88.                                 return 0;
  89.                             });
  90.                             $.each(rows, function(index, row) {
  91.                                 $table.children('tbody').append(row);
  92.                                 row.sortKey = null;
  93.                             });

  94.                             $table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');
  95.                             var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');
  96.                             //实现反向排序
  97.                             if (newDirection == 1) {
  98.                                 $sortHead.addClass('sorted-asc');
  99.                             } else {
  100.                                 $sortHead.addClass('sorted-desc');
  101.                             }

  102.                             //调用隔行变色的函数
  103.                             $table.alternateRowColors($table);
  104.                             //移除已排序的列的样式,添加样式到当前列
  105.                             $table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
  106.                             $table.trigger('repaginate');
  107.                         });
  108.                     }
  109.                 });
  110.             });
  111.         });
  112.         //分页
  113.         $(function() {
  114.             $('table.paginated').each(function() {
  115.                 var currentPage = 0;
  116.                 var numPerPage = 10;
  117.                 var $table = $(this);
  118.                 $table.bind('repaginate', function() {
  119.                     $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
  120.                 });

  121.                 var numRows = $table.find('tbody tr').length;
  122.                 var numPages = Math.ceil(numRows / numPerPage);
  123.                 var $pager = $('<div class="pager"></div>');
  124.                 for (var page = 0; page < numPages; page++) {
  125.                     $('<span class="page-number"></span>').text(page + 1)
  126.                      .bind('click', { newPage: page }, function(event) {
  127.                          currentPage = event.data['newPage'];
  128.                          $table.trigger('repaginate');
  129.                          $(this).addClass('active').siblings().removeClass('active');
  130.                      }).appendTo($pager).addClass('clickable');
  131.                 }
  132.                 $pager.insertBefore($table);
  133.                 $table.trigger('repaginate');
  134.                 $pager.find('span.page-number:first').addClass('active');
  135.             });
  136.         });
  137.     </script>
  138. </head>
  139. <body>
  140.     <form id="form1" runat="server">
  141.     <div>
  142.         <table class="myTable paginated">
  143.             <thead>
  144.                 <tr>
  145.                     <th class="sort-alpha">
  146.                         Last Name
  147.                     </th>
  148.                     <th class="sort-alpha">
  149.                         First Name
  150.                     </th>
  151.                     <th>
  152.                         Email
  153.                     </th>
  154.                     <th class="sort-numeric">
  155.                         Due
  156.                     </th>
  157.                     <th class="sort-date">
  158.                         Date
  159.                     </th>
  160.                     <th>
  161.                         Web Site
  162.                     </th>
  163.                 </tr>
  164.             </thead>
  165.             <tbody>
  166.                 <tr>
  167.                     <td>
  168.                         Smith
  169.                     </td>
  170.                     <td>
  171.                         John
  172.                     </td>
  173.                     <td>
  174.                         jsmith@gmail.com
  175.                     </td>
  176.                     <td>
  177.                         $50.00
  178.                     </td>
  179.                     <td>
  180.                         Mar 2009
  181.                     </td>
  182.                     <td>
  183.                         http://www.icanwin.net
  184.                     </td>
  185.                 </tr>
  186.                 <tr>
  187.                     <td>
  188.                         Marshal
  189.                     </td>
  190.                     <td>
  191.                         hi
  192.                     </td>
  193.                     <td>
  194.                        niuyanbin@gmail.com
  195.                     </td>
  196.                     <td>
  197.                         $80.00
  198.                     </td>
  199.                     <td>
  200.                         June 2011
  201.                     </td>
  202.                     <td>
  203.                         http://www.modchina.com
  204.                     </td>
  205.                 </tr>
  206.             </tbody>
  207.         </table>
  208.     </div>
  209.     </form>
  210. </body>
  211. </html>
复制代码

使用道具 举报

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

回顶部