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