summary:Object-oriented paging effect encapsulation of non-refresh table based on jquery
<table id="cs_table" class="datatable"></table>
html,body{margin: 0;padding:0} a:focus {outline: none;} /* General table display */ table, th, td {font: 12px Arial,Helvetica,sans-serif,'Arial';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;} /*Table pagination list*/ .datatable td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;} /*Table paging current page*/ .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}
js package object
/** * abstract form */ function abstractTable(){ // --------- Content property this.id = null; // each table has a unique id this.tableobj = null; //table object this.rowNum = 0; //Number of rows this.colNum = 0; //列数 this.header = []; //Header data this.content = []; //body data // ------------ Provide external use to get internal data of the table this.currentClickRowID = 0; //The currently clicked row data // --- Get the number of columns in this table through the header this.getColNum = function(){ this.colNum = this.header.length; return this.colNum; } // ------------- form self-construction behavior this.clearTable = function(){}; this.showHeader = function(){}; this.showContent = function(begin,end){}; this.showFoot = function(){}; // --------- Paging function properties this.allDataNum = 0; // total number of data this.displayNum = 10; // number of bars displayed per page this.maxPageNum = 0; // maximum page number value this.currentPageNum =1;// current page number value //tfoot paging group this.groupDataNum = 10; // each group displays 10 pages this.groupNum = 1; //current group // -------- paging function behavior this.paginationFromBeginToEnd = function(begin,end){} this.first = function(){}//Home this.last = function(){}//The last page this.prev = function(){}//Previous page this.next = function(){}//Next page this.goto = function(){} //Jump to a page // ------------- table initialization this.init = function(begin,end){} } /* Table Object Template */ function tableTemplet(table_id){ abstractTable.call(this); this.id = table_id; } /** * table object * @param options */ function table(options){ if(!options){return;} if(!$.isPlainObject(options)){return;} tableTemplet.call(this,options.tableId); // get form object this.tableobj = $("#"+this.id); //Clear the table content this.clearTable = function(){ this.tableobj.html(" "); } // Implement paging behavior 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) } } //Initialize tbody this.showContent = function(begin,end){ if(this.content != null){ var $tbody = $("<tbody>"), $tr, $td; var tempDaTa = this.paginationFromBeginToEnd(begin,end), len = tempDaTa.length; // loop to create rows for (var i = 0; i <len; i ++) { $tr = $("<tr>").appendTo($tbody); if(i%2==1){ $tr.addClass("evenrow"); } // Loop to create columns to get the keys in the object for(var key in tempDaTa[i]){ $td = $("<td>").html(tempDaTa[i][key]).appendTo($tr); } } this.tableobj.append($tbody); } } //initialize 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); } // form paging this.pagination = function(tdCell){ var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell); //front page var oA = $("<a/>"); oA.attr("href","#1"); oA.html("Home"); $td.append(oA); //previous page if(this.currentPageNum>=2){ var oA = $("<a/>"); oA.attr("href","#"+(this.currentPageNum - 1)); oA.html("Previous page"); $td.append(oA); } // normal display format if(this.maxPageNum <= this.groupDataNum){ // 10 pages are a group 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{//After more than 10 pages (that is, after the first group) if(this.groupNum<=1){//The first group is displayed 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{//Display behind the second group 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); } } } //Next page if( (this.maxPageNum - this.currentPageNum) >= 1 ){ var oA = $("<a/>"); oA.attr("href","#" + (this.currentPageNum + 1)); oA.html("Next page"); $td.append(oA); } // Tail var oA = $("<a/>"); oA.attr("href","#" + this.maxPageNum); oA.html("Last page"); $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){//Next group 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){//The previous group if((tempThis.currentPageNum-1)%tempThis.groupDataNum==0){ tempThis.groupNum -= 1; if(tempThis.groupNum<=1){ tempThis.groupNum = 1; } } } if(nowNum==tempThis.maxPageNum){//Click on the last page directly 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; }); } //initialization 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); }
call method
<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":["serial number","name","gender","age","address"], //required "data":data, //required "displayNum": 6, //must default to 10 "groupDataNum":9 //optional default 10 }); </script>