jquery 表格操作和分页

最新推荐文章于 2024-02-04 10:11:32 发布

fonyer

最新推荐文章于 2024-02-04 10:11:32 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/fonyer/article/details/83119333

版权

jquery 表格操作和分页 - JQD - The future is in my

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
img{border:none}
.clickable{background:#E7E7E7}
.hover{background:#CCCCCC}
.odd{background:#DBDCB1}
.even{background:#C7E2E2}
.sorted{background:#FFE1C4}
.page-number{border:#CCCCCC dotted 1px;margin-right:5px}
</style>
<script src="../jquery.js"/></script>
<script src="b.js"/></script>
<script language="javascript">
jQuery(function(){
/*var rowClass = function ($table){
$('tbody tr:odd',$table).removeClass("even").addClass("odd");
$('tbody tr:even',$table).removeClass("odd").addClass("even");
} */
//定义插件
/*jQuery.fn.rowClass = function(){
$('tbody tr:odd',this).removeClass("even").addClass("odd");
$('tbody tr:even',this).removeClass("odd").addClass("even");
return this;
}*/

$("table.sortable").each(function(){

    var $table = $(this);
//rowClass($table)
$table.rowClass();//调用插件方法
$('th',$table).each(function(column){
  var $header = $(this);
  var findSortKey;
  if($header.is(".sort-alpha")){//按字母排序
   findSortKey = function($cell){
    return $cell.find(".sort-key").text().toUpperCase()+' '+$cell.text().toUpperCase();
   }
  }else if($header.is(".sort-numeric")){//按数字排序
   findSortKey = function($cell){
    var key = $cell.text().replace(/^[^\d.]*/,'');
    key = parseFloat(key);
    return isNaN(key) ? 0 : key;
   }
  }else if($header.is(".sort-date")){//按时间排序
         findSortKey = function($cell){
           return Date.parse('1 '+$cell.text());
         }
  }
     if(findSortKey){
     //if($header.is(".sort-alpha")){
      $header.addClass("clickable").hover
      (
       function(){
        $header.addClass("hover");
       },function(){
        $header.removeClass("hover");
       }
        ).click(function(){
          var sortDirection = 1;//默认正序
        if($header.is('.sorted-asc')){//倒序
             sortDirection = -1;
        }
           var rows = $table.find("tbody>tr").get();
        /* rows.sort(function (a,b){
               var keyA = $(a).children("td").eq(column).text().toUpperCase();
            var keyB = $(b).children("td").eq(column).text().toUpperCase();

            if(keyA < keyB) return -1;
            if(keyA > keyB) return 1;
            return 0;
           });*/
        //把要排序的列的值赋给变量
        $.each(rows,function(index,row){
             //$table.children("tbody").append(row);
             var $cell = $(row).children('td').eq(column);
             row.sortKey = findSortKey($cell);
          })
          //对变量排序
          rows.sort(function(a,b){
          if(a.sortKey<b.sortKey) return -sortDirection;
          if(a.sortKey>b.sortKey) return sortDirection;
          return 0;
          })
          //生成新的表格
          $.each(rows,function(index,row){
          $table.children("tbody").append(row);
          row.sortKey = null;
          })
          //正序倒序切换样式
          $table.find('th').removeClass("sorted-asc").removeClass("sorted-desc");
          if(sortDirection == 1){
          $header.addClass("sorted-asc");
          }else{
          $header.addClass("sorted-desc");
          }
          //选中的列高亮显示
          $table.find("td").removeClass("sorted").filter(":nth-child("+(column+1)+")").addClass('sorted');
          $table.rowClass();
          $table.trigger("repaginate")
          //rowClass($table)
        })
     }
     //}
    })
   })
})
//分页
jQuery(function(){
   //分页
   $("table.sortable").each(function(){
    var $table = $(this);
var currentPage = 0;
var numPerPage = 2;
$table.bind("repaginate",function(){
  $table.find('tbody tr').hide().slice(currentPage*numPerPage,(currentPage+1)*numPerPage).show();
})
/*var 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('hover').siblings().removeClass("hover");
      }).appendTo($pager);//.addClass('clickable');
    }
$pager.insertBefore($table).find("span.page-number:first").addClass('hover');
   })
})
</script>
</head>
<body>
<div class=".paginated"></div>
<table class="sortable">
<thead >
   <tr>
     <th class="sort-alpha">Img</th>
     <th class="sort-alpha">Title</th>
     <th class="sort-alpha">Author(s)</th>
     <th class="sort-date">Publish Date</th>
     <th class="sort-numeric">Price</th>
   </tr>
</thead>
<tbody>
    <tr>
        <td><a href="#"><img src='a.jpg' /></a></td>
     <td>Building Websites</td>
     <td>Hagen Graf</td>
     <td>Feb 2011</td>
     <td>$40.49</td>
    </tr>
    <tr>
        <td><a href="#"><img src='a.jpg' /></a></td>
     <td>Learning Websites</td>
     <td>Aagen Graf</td>
     <td>Feb 2010</td>
     <td>$52.49</td>
    </tr>
    <tr>
        <td><a href="#"><img src='b.jpg' /></a></td>
     <td>Building Websites</td>
     <td>Hagen Graf</td>
     <td>Feb 2009</td>
     <td>$23.49</td>
    </tr>
    <tr>
        <td><a href="#"><img src='b.jpg' /></a></td>
     <td>Building Websites</td>
     <td>Gagen Graf</td>
     <td>Feb 2008</td>
     <td>$30.49</td>
    </tr>
    <tr>
        <td><a href="#"><img src='c.jpg' /></a></td>
     <td>Building Websites</td>
     <td>Hagen Graf</td>
     <td>Feb 2007</td>
     <td>$45.49</td>
    </tr>
     <tr>
        <td><a href="#"><img src='c.jpg' /></a></td>
     <td>XXuilding Websites</td>
     <td>Dagen Graf</td>
     <td>Feb 2005</td>
     <td>$33</td>
    </tr>
</tbody>
</table>
</body>
</html>