jQuery table內容點選標題排序

admin發表於2018-07-16
jQuery排序

如果一個table表格中儲存的是不同型別的資料的話，可能在檢視資料的時候，需要根據一定的順序排序。

下面就通過一段jQuery程式碼例項演示一下如何實現此功能.

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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> eth@gmail.com </td>
          <td> $34.00 </td>
          <td> 14 2009 </td>
          <td> tp://www.baidu.com </td>
        </tr>
        <tr>
          <td> antzone </td>
          <td> softwhy.com </td>
          <td> jsmith@gmail.com </td>
          <td> $50.00 </td>
          <td> Mar 2009 </td>
          <td> softwhy.com </td>
        </tr>
        <tr>
          <td> CSmith </td>
          <td> John </td>
          <td> DDDD@gmail.com </td>
          <td> $50.00 </td>
          <td> Mar 2009 </td>
          <td> http://www.softwhy.com</td>
        </tr>
        <tr>
          <td> Smith </td>
          <td> John </td>
          <td> sdsf@gmail.com </td>
          <td> $50.00 </td>
          <td> f32 2009 </td>
          <td> ffttp://www.softwhy.com</td>
        </tr>
      </tbody>
    </table>
  </div>
</form>
</body>
</html>

相關文章