基于jQuery實現(xiàn)的無刷新表格分頁實例

更新時間：2016年02月17日 11:53:38 作者：The-duke

這篇文章主要介紹了基于jQuery實現(xiàn)的無刷新表格分頁方法,結(jié)合完整實例形式較為詳細(xì)的分析了jQuery實現(xiàn)無刷新表格分頁的具體步驟與相關(guān)實現(xiàn)代碼,需要的朋友可以參考下

本文實例講述了基于jQuery實現(xiàn)的無刷新表格分頁。分享給大家供大家參考，具體如下：

效果圖如下：

html結(jié)構(gòu)：

<table id="cs_table" class="datatable"></table>

css樣式：

html,body{margin: 0;padding:0}
a:focus {outline: none;}
/* 通用表格顯示 */
table, th, td {font: 12px Arial,Helvetica,sans-serif,'宋體';margin: 0;padding: 0}
table{border-spacing: 0;border-collapse: collapse;}
.datatable {width: 100%;border-style: none;background-color: #fff;margin-bottom: 20px;text-align: left;}
.datatable th, .datatable td { padding: 5px;line-height: 30px}
.datatable thead th {background-color: #eee;margin: 0;text-align: left;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500}
.datatable tbody td {background-color: #fff;border-bottom: 1px solid #ddd;table-layout:fixed;word-break:break-all;font-weight: 400}
.datatable tbody tr.evenrow td {background-color: #f4f4f4;}
.datatable tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;}
/*表格分頁列表*/
.datatable td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;}
/*表格分頁當(dāng)前頁*/
.datatable td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;}
.datatable td.paging a.current{border: 0;cursor: auto;background:none}

javascript封裝代碼：

/**
 * 抽象化表格
 */
function abstractTable(){
  // ---------內(nèi)容屬性
  this.id = null;     // 每個表格都有唯一的一個id
  this.tableobj = null; //表格對象
  this.rowNum = 0;    //行數(shù)
  this.colNum = 0;   //列數(shù)
  this.header = [];   //表頭數(shù)據(jù)
  this.content = [];  //body數(shù)據(jù)
  // ----------提供外部使用獲得表格內(nèi)部數(shù)據(jù)
  this.currentClickRowID = 0;  //當(dāng)前點(diǎn)擊的行數(shù)據(jù)
  // --- 通過表頭來獲得這張表的列數(shù)
  this.getColNum = function(){
    this.colNum = this.header.length;
    return  this.colNum;
  }
  // ----------- 表格自我構(gòu)建行為
  this.clearTable = function(){};
  this.showHeader = function(){};
  this.showContent = function(begin,end){};
  this.showFoot = function(){};
  // --------- 分頁功能屬性
  this.allDataNum = 0; // 總數(shù)據(jù)條數(shù)
  this.displayNum = 10; // 每頁顯示條數(shù)
  this.maxPageNum = 0; // 最大頁碼值
  this.currentPageNum =1;// 當(dāng)前頁碼值
  //tfoot分頁組
  this.groupDataNum = 10; //每組顯示10頁
  this.groupNum = 1;    //當(dāng)前組
  // -------- 分頁功能行為
  this.paginationFromBeginToEnd = function(begin,end){}
  this.first = function(){}//首頁
  this.last = function(){}//最后一頁
  this.prev = function(){}//上一頁
  this.next = function(){}//下一頁
  this.goto = function(){} //跳到某頁
  // ----------- 表格初始化
  this.init = function(begin,end){}
}
/*
 表格對象模板
 */
function tableTemplet(table_id){
  abstractTable.call(this);
  this.id = table_id;
}
/**
 * 表格對象
 * @param options
 */
function table(options){
  if(!options){return;}
  if(!$.isPlainObject(options)){return;}
  tableTemplet.call(this,options.tableId);
  //得到表格對象
  this.tableobj = $("#"+this.id);
  //清空表格內(nèi)容
  this.clearTable = function(){
    this.tableobj.html(" ");
  }
  // 實現(xiàn)分頁行為
  this.paginationFromBeginToEnd= function(x,y){
    this.maxPageNum = Math.ceil(this.allDataNum/this.displayNum);
    var arrPage = [];
    for(var i= x;i<y;i++){
      arrPage.push(this.content[i]);
    }
    return arrPage;
  }
  this.showHeader = function(){
    if(this.header != null){
      var $thead = $("<thead>"),
        $tr = $("<tr>"),
        $th;
      for(var i=0;i<this.colNum;i++){
        $th = $("<th>").html(this.header[i]);
        $th.appendTo($tr);
      }
      $tr.appendTo($thead);
      $thead.appendTo(this.tableobj)
    }
  }
  //初始化tbody
  this.showContent = function(begin,end){
    if(this.content != null){
      var $tbody = $("<tbody>"),
        $tr,
        $td;
      var tempDaTa = this.paginationFromBeginToEnd(begin,end),
        len = tempDaTa.length;
      // 循環(huán)創(chuàng)建行
      for(var i=0;i<len;i++){
        $tr = $("<tr>").appendTo($tbody);
        if(i%2==1){
          $tr.addClass("evenrow");
        }
        // 循環(huán)創(chuàng)建列 取得對象中的鍵
        for(var key in tempDaTa[i]){
          $td = $("<td>").html(tempDaTa[i][key]).appendTo($tr);
        }
      }
      this.tableobj.append($tbody);
    }
  }
  //初始化tfoot
  this.showFoot = function(){
    var $tfoot = $("<tfoot>"),
      $tr = $("<tr>"),
      $td = $("<td>").attr("colspan",this.colNum).addClass("paging");
      $tr.append($td);
      $tfoot.append($tr);
      this.tableobj.append($tfoot);
      this.pagination($td);
  }
  //表格分頁
  this.pagination = function(tdCell){
    var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell);
    //首頁
    var oA = $("<a/>");
    oA.attr("href","#1");
    oA.html("首頁");
    $td.append(oA);
    //上一頁
    if(this.currentPageNum>=2){
      var oA = $("<a/>");
      oA.attr("href","#"+(this.currentPageNum - 1));
      oA.html("上一頁");
      $td.append(oA);
    }
    //普通顯示格式
    if(this.maxPageNum <= this.groupDataNum){ // 10頁以內(nèi) 為一組
      for(var i = 1;i <= this.maxPageNum ;i++){
        var oA = $("<a/>");
        oA.attr("href","#"+i);
        if(this.currentPageNum == i){
          oA.attr("class","current");
        }
        oA.html(i);
        $td.append(oA);
      }
    }else{//超過10頁以后（也就是第一組后）
       if(this.groupNum<=1){//第一組顯示
         for(var j = 1;j <= this.groupDataNum ;j++){
           var oA = $("<a/>");
           oA.attr("href","#"+j);
           if(this.currentPageNum == j){
             oA.attr("class","current");
           }
           oA.html(j);
           $td.append(oA);
         }
       }else{//第二組后面的顯示
         var begin = (this.groupDataNum*(this.groupNum-1))+ 1,
           end ,
           maxGroupNum = Math.ceil(this.maxPageNum/this.groupDataNum);
         if(this.maxPageNum%this.groupDataNum!=0&&this.groupNum==maxGroupNum){
           end = this.groupDataNum*(this.groupNum-1)+this.maxPageNum%this.groupDataNum
         }else{
           end = this.groupDataNum*(this.groupNum);
         }
         for(var j = begin;j <= end ;j++){
           var oA = $("<a/>");
           oA.attr("href","#"+j);
           if(this.currentPageNum == j){
             oA.attr("class","current");
           }
           oA.html(j);
           $td.append(oA);
         }
       }
    }
    //下一頁
    if( (this.maxPageNum - this.currentPageNum) >= 1 ){
      var oA = $("<a/>");
      oA.attr("href","#" + (this.currentPageNum + 1));
      oA.html("下一頁");
      $td.append(oA);
    }
    //尾頁
    var oA = $("<a/>");
    oA.attr("href","#" + this.maxPageNum);
    oA.html("尾頁");
    $td.append(oA);
    var page_a = $td.find('a');
    var tempThis = this;
    page_a.unbind("click").bind("click",function(){
      var nowNum = parseInt($(this).attr('href').substring(1));
      if(nowNum>tempThis.currentPageNum){//下一組
        if(tempThis.currentPageNum%tempThis.groupDataNum==0){
          tempThis.groupNum += 1;
          var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
          if(tempThis.groupNum>=maxGroupNum){
            tempThis.groupNum = maxGroupNum;
          }
        }
      }
      if(nowNum<tempThis.currentPageNum){//上一組
        if((tempThis.currentPageNum-1)%tempThis.groupDataNum==0){
          tempThis.groupNum -= 1;
          if(tempThis.groupNum<=1){
            tempThis.groupNum = 1;
          }
        }
      }
      if(nowNum==tempThis.maxPageNum){//直接點(diǎn)擊尾頁
        var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
        tempThis.groupNum = maxGroupNum;
      }
      if(nowNum==1){
        var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
        tempThis.groupNum = 1;
      }
      tempThis.currentPageNum = nowNum;
      tempThis.init((tempThis.currentPageNum-1)*tempThis.displayNum,
        tempThis.currentPageNum*tempThis.displayNum);
      return false;
    });
  }
  //初始化
  this.init = function(begin,end){
    this.header = options.headers;
    this.colNum = this.header.length;
    this.content = options.data;
    this.allDataNum = this.content.length;
    if(options.displayNum){
      this.displayNum = options.displayNum;
    }
    if(options.groupDataNum){
      this.groupDataNum = options.groupDataNum;
    }
    this.clearTable();
    this.showHeader();
    this.showContent(begin,end);
    this.showFoot();
  }
  this.init(0,options.displayNum);
}

調(diào)用方式：

<script type="text/javascript">
  var data = [];
  for(var i=0;i<334;i++){
    data[i] = {id:i+1,name:"jason"+(i+1),gender:"男",age:26,address:"成都"};
  }
  var cs = new table({
    "tableId":"cs_table",  //必須
    "headers":["序號","姓名","性別","年齡","地址"],  //必須
    "data":data,    //必須
    "displayNum": 6,  //必須  默認(rèn) 10
    "groupDataNum":9 //可選  默認(rèn) 10
});
</script>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》及《jquery常用操作技巧匯總》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: