基于jquery的表格无刷新分页代码,JS代码库,德仔网

代码语言
代码分类
【JS】基于jquery的表格无刷新分页
作者:忽左忽右 / 发布于2014/9/10/ 806

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	 "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	 <title>面向对象的无刷新表格分页</title>
	 <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	 <script type="text/javascript" src="js/table_oo.js"></script>
	 <style type="text/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}
	 </style>
	</head>
	<body>
	<table id="cs_table" class="datatable"></table>
	<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", //必须 表格id
	 "headers":["序号","姓名","性别","年龄","地址"], //必须
	 "data":data, //必须
	 "displayNum": 6, //必须 默认 10
	 "groupDataNum":9 //可选 默认 10
	});
	</script>
	</body>
	</html>
	3. [文件] table_oo.js ~ 9KB 下载(6)
	?
	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12
	13
	14
	15
	16
	17
	18
	19
	20
	21
	22
	23
	24
	25
	26
	27
	28
	29
	30
	31
	32
	33
	34
	35
	36
	37
	38
	39
	40
	41
	42
	43
	44
	45
	46
	47
	48
	49
	50
	51
	52
	53
	54
	55
	56
	57
	58
	59
	60
	61
	62
	63
	64
	65
	66
	67
	68
	69
	70
	71
	72
	73
	74
	75
	76
	77
	78
	79
	80
	81
	82
	83
	84
	85
	86
	87
	88
	89
	90
	91
	92
	93
	94
	95
	96
	97
	98
	99
	100
	101
	102
	103
	104
	105
	106
	107
	108
	109
	110
	111
	112
	113
	114
	115
	116
	117
	118
	119
	120
	121
	122
	123
	124
	125
	126
	127
	128
	129
	130
	131
	132
	133
	134
	135
	136
	137
	138
	139
	140
	141
	142
	143
	144
	145
	146
	147
	148
	149
	150
	151
	152
	153
	154
	155
	156
	157
	158
	159
	160
	161
	162
	163
	164
	165
	166
	167
	168
	169
	170
	171
	172
	173
	174
	175
	176
	177
	178
	179
	180
	181
	182
	183
	184
	185
	186
	187
	188
	189
	190
	191
	192
	193
	194
	195
	196
	197
	198
	199
	200
	201
	202
	203
	204
	205
	206
	207
	208
	209
	210
	211
	212
	213
	214
	215
	216
	217
	218
	219
	220
	221
	222
	223
	224
	225
	226
	227
	228
	229
	230
	231
	232
	233
	234
	235
	236
	237
	238
	239
	240
	241
	242
	243
	244
	245
	246
	247
	248
	249
	250
	251
	252
	253
	254
	255
	256
	257
	/**
	* 抽象化表格
	*/
	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);
	}
试试其它关键字
　无刷新分页　
同语言下
可能有用的
忽左忽右贡献的其它代码(4)