基于jQuery实现的无刷新表格分页实例

本文实例讲述了基于jQuery实现的无刷新表格分页。分享给大家供大家参考，具体如下：

效果图如下：

html结构：

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;}

.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(){
  // ---------内容属性
  this.id = null;     // 每个表格都有唯一的一个id
  this.tableobj = null; //表格对象
  this.rowNum = 0;    //行数
  this.colNum = 0;   //列数
  this.header = [];   //表头数据
  this.content = [];  //body数据
  // ----------提供外部使用获得表格内部数据
  this.currentClickRowID = 0;  //当前点击的行数据
  // --- 通过表头来获得这张表的列数
  this.getColNum = function(){
    this.colNum = this.header.length;
    return  this.colNum;
  }
  // ----------- 表格自我构建行为
  this.clearTable = function(){};
  this.showHeader = function(){};
  this.showContent = function(begin,end){};
  this.showFoot = function(){};
  // --------- 分页功能属性
  this.allDataNum = 0; // 总数据条数
  this.displayNum = 10; // 每页显示条数
  this.maxPageNum = 0; // 最大页码值
  this.currentPageNum =1;// 当前页码值
  //tfoot分页组
  this.groupDataNum = 10; //每组显示10页
  this.groupNum = 1;    //当前组
  // -------- 分页功能行为
  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;
}

function table(options){
  if(!options){return;}
  if(!$.isPlainObject(options)){return;}
  tableTemplet.call(this,options.tableId);
  //得到表格对象
  this.tableobj = $("#"+this.id);
  //清空表格内容
  this.clearTable = function(){
    this.tableobj.html(" ");
  }
  // 实现分页行为
  this.paginationFromBeginToEnd= function(x,y){
    this.maxPageNum = Math.ceil(this.allDataNum/this.displayNum);
    var arrPage = [];
    for(var i= x;i"),
 $tr = $(""),
 $th;
      for(var i=0;i").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 = $(""),
 $tr,
 $td;
      var tempDaTa = this.paginationFromBeginToEnd(begin,end),
 len = tempDaTa.length;
      // 循环创建行
      for(var i=0;i").appendTo($tbody);
 if(i%2==1){
   $tr.addClass("evenrow");
 }
 // 循环创建列 取得对象中的键
 for(var key in tempDaTa[i]){
   $td = $("").html(tempDaTa[i][key]).appendTo($tr);
 }
      }
      this.tableobj.append($tbody);
    }
  }
  //初始化tfoot
  this.showFoot = function(){
    var $tfoot = $(""),
      $tr = $(""),
      $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 = $("");
    oA.attr("href","#1");
    oA.html("首页");
    $td.append(oA);
    //上一页
    if(this.currentPageNum>=2){
      var oA = $("");
      oA.attr("href","#"+(this.currentPageNum - 1));
      oA.html("上一页");
      $td.append(oA);
    }
    //普通显示格式
    if(this.maxPageNum <= this.groupDataNum){ // 10页以内 为一组
      for(var i = 1;i <= this.maxPageNum ;i++){
 var oA = $("");
 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 = $("");
    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 = $("");
    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 = $("");
      oA.attr("href","#" + (this.currentPageNum + 1));
      oA.html("下一页");
      $td.append(oA);
    }
    //尾页
    var oA = $("");
    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

调用方式：





更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》
希望本文所述对大家jQuery程序设计有所帮助。