效果图

html结构

<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;}/*表格分页当前页*/.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;         // 每个表格都有唯一的一个idthis.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)}}//初始化tbodythis.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);}}//初始化tfootthis.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>