• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery实现table内容点击标题排序代码示例

jQuery 程序员 2年前 (2019-01-19) 146次浏览 已收录 0个评论

如果一个table表格中存储的是不同类型的数据的话,可能在查看数据的时候,需要根据一定的顺序排序。

下面就通过一段jQuery代码实例演示一下如何实现此功能.

代码实例如下:

本文案例为大家展示了《jQuery实现table内容点击标题排序代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>jQuery实现table内容点击标题排序代码示例-搞代码gaodaima.com</title> <style type=”text/css”> thead{   background-color:Blue;   color:White; } tr.odd{background-color:#ddd;} tr.even{background-color:#eee;} .clickable{text-decoration:underline;} .hover{background-color: #5dd354;} .sorted{background-color: #ded070;} .page-number{   color:Black;   margin:2px 10px;   padding:2px 5px; } .active{   border:solid 1px red;   background-color:#76a7d2; } .pager{   margin-bottom:10px;   margin-left:20px; } </style> <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script> <script type=”text/javascript”> ;$(function() {     //做成插件的形式    jQuery.fn.alternateRowColors = function() {      //隔行变色 奇数行                          $(‘tbody tr:odd’, this).removeClass(‘even’).addClass(‘odd’);          //隔行变色 偶数行      $(‘tbody tr:even’, this).removeClass(‘odd’).addClass(‘even’);      return this;    };    $(‘table.myTable’).each(function(){          //将table存储为一个jquery对象      var $table = $(this);            //在排序时隔行变色                         $table.alternateRowColors($table);               $(‘th’, $table).each(function(column) {        var findSortKey;            //按字母排序        if ($(this).is(‘.sort-alpha’)) {                findSortKey = function($cell) {            return $cell.find(‘sort-key’).text().toUpperCase() + ” + $cell.text().toUpperCase();          };        }            //按数字排序            else if ($(this).is(‘.sort-numeric’)) {                findSortKey = function($cell) {            var key = parseFloat($cell.text().replace(/^[^\d.]*/, ”));            return isNaN(key) ? 0 : key;          };        }            //按日期排序            else if ($(this).is(‘.sort-date’)) {                   findSortKey = function($cell) {            return Date.parse(‘1 ‘ + $cell.text());          };        }        if (findSortKey) {        $(this).addClass(‘clickable’).hover(function() {              $(this).addClass(‘hover’);            }, function() {              $(this).removeClass(‘hover’);            }).click(function() {          //反向排序状态声明          var newDirection = 1;          if ($(this).is(‘.sorted-asc’)) {            newDirection = -1;          }          var rows = $table.find(‘tbody>tr’).get(); //将数据行转换为数组          $.each(rows, function(index, row) {            row.sortKey = findSortKey($(row).children(‘td’).eq(column));          });          rows.sort(function(a, b) {            if (a.sortKey < b.sortKey) return -newDirection;            if (a.sortKey > b.sortKey) return newDirection;            return 0;          });          $.each(rows, function(index, row) {            $table.children(‘tbody’).append(row);            row.sortKey = null;          });          $table.find(‘th’).removeClass(‘sorted-asc’).removeClass(‘sorted-desc’);          var $sortHead = $table.find(‘th’).filter(‘:nth-child(‘ + (column + 1) + ‘)’);          //实现反向排序          if (newDirection == 1) {            $sortHead.addClass(‘sorted-asc’);           }                   else {             $sortHead.addClass(‘sorted-desc’);           }           //调用隔行变色的函数           $table.alternateRowColors($table);           //移除已排序的列的样式,添加样式到当前列           $table.find(‘td’).removeClass(‘sorted’).filter(‘:nth-child(‘ + (column + 1) + ‘)’).addClass(‘sorted’);           $table.trigger(‘repaginate’);         });       }     });   }); }); //分页 $(function() {   $(‘table.paginated’).each(function() {     var currentPage = 0;     var numPerPage = 10;     var $table = $(this);     $table.bind(‘repaginate’, function() {       $table.find(‘tbody tr’).hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();     });     var numRows = $table.find(‘tbody tr’).length;     var numPages = Math.ceil(numRows / numPerPage);     var $pager = $(‘<div class=”pager”></div>’);     for (var page = 0; page < numPages; page++) {       $(‘<span class=”page-number”></span>’).text(page + 1)       .bind(‘click’, { newPage: page }, function(event) {         currentPage = event.data[‘newPage’];         $table.trigger(‘repaginate’);         $(this).addClass(‘active’).siblings().removeClass(‘active’);       }).appendTo($pager).addClass(‘clickable’);     }     $pager.insertBefore($table);     $table.trigger(‘repaginate’);     $pager.find(‘span.page-number:first’).addClass(‘active’);   }); }); </script> </head> <body> <form id=”form1″ runat=”server”>   <div>     <table class=”myTable paginated”>       <thead>         <tr>           <th class=”sort-alpha”> Last Name </th>           <th class=”sort-alpha”> First Name </th>           <th> Email </th>           <th class=”sort-numeric”> Due </th>           <th class=”sort-date”> Date </th>           <th> Web Site </th>         </tr>       </thead>       <tbody>         <tr>           <td> tmith </td>           <td> erthn </td>           <td> [email protected] </td>           <td> $34.00 </td>           <td> 14 2009 </td>           <td> tp://www.baidu.com </td>         </tr>         <tr>           <td> antzone </td>           <td> gaodaima.com </td>           <td> [email protected] </td>           <td> $50.00 </td>           <td> Mar 2009 </td>           <td> gaodaima.com </td>         </tr>         <tr>           <td> CSmith </td>           <td> John </td>           <td> [email protected] </td>           <td> $50.00 </td>           <td> Mar 2009 </td>           <td> http://www.gaodaima.com</td&gt;         </tr>         <tr>           <td> Smith </td>           <td> John </td>           <td> [email protected] </td>           <td> $50.00 </td>           <td> f32 2009 </td>           <td> ffttp://www.gaodaima.com</td>         </tr>       </tbody>     </table>   </div> </form> </body> </html>[/code]


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址