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

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

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}

/** * 抽象化表格 */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;}/** * 表格对象 * @param options */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<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;      // 循环创建行      for(var i=0;i<len;i++){        $tr = $("<tr>").appendTo($tbody);        if(i%2==1){          $tr.addClass("evenrow");        }        // 循环创建列 取得对象中的键        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页以内 为一组      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){//直接点击尾页        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);}

<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,  //必须  默认 10    "groupDataNum":9 //可选  默认 10});</script>