jQuery不刷新分页动态数据表格代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery不刷新分页动态数据表格代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery不刷新分页动态数据表格代码</title>

    <link rel="stylesheet" href="style.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/table.js"></script>
    <script src="js/jquery.page.js"></script>

</head>

<body>
    <div class="table_body"></div>
    <div id="page_navigation"></div>
    <script>
        $(document).Table('.table_body', 're', 56, 4, ['序号', '项目1', '项目2', '项目3'], [[, , ], [, , ], [, , ]]);
        $(document).PaginBar('page_navigation', 'table_body', 22);
    </script>
</body>
</html>

JS代码(table.js):

;
	(function($){
	$.fn.extend({
	"Table":function(divId,id,row,col,headList,content){
	// var row = 16;
	var table = $("<table class='re' id="+id+">"),// 设置表头 setHead = function(){
	for(var n = 0;
	n<col;
	n++){
	var th = $("<th>"+headList[n]+"</th>");
	$(th).appendTo(table);
}
}
,// 设置内容setContent = function(){
	var td=new Array();
	// $.each(content,function(i,item){
	//$.each(item,function(j,val){
	//td.push(val);
	//}
);
	//}
);
	for(var y=0;
	y<row;
	y++){
	var tr = $("<tr>");
	$(tr).appendTo(table);
	for(var x=0+(col*y);
	x<col*(y+1);
	x++){
	$("<td>"+" "+"</td>").appendTo(tr);
}
$("</tr>").appendTo(table);
	// 设置序号for(var i =0;
	i<row;
	i++){
	$("#re tr:eq("+i+") td:eq(0)").text(i+1);
}
}
}
;
	table.appendTo($(divId));
	$("<thead>").appendTo(table);
	setHead();
	$("</thead>").appendTo(table);
	$("<tbody>").appendTo(table);
	setContent();
	$("</tbody>").appendTo(table);
	$(divId).append("</table>");
	// 样式$(".re th:eq(0),#bank th:eq(0)").css({
	"width":"50px","text-align":"center"}
);
	$("#re tr td:last-child()").css({
	"width":"50px","margin":"0 auto","vertical-align":"middle"}
)$(".re tr td:first-child()").css({
	"background":"linear-gradient(to bottom,#f9f9f9,#f1f1f1)","text-align":"center"}
)}
//table结束}
);
	//fn结束}
(jQuery));

CSS代码(style.css):

/*表格*/
.table_body{width:100%;}
.re{width:100%;border:1px solid #95b8e7;box-sizing:border-box;outline:none;border-collapse:collapse;border-spacing:0;}
.re th{height:25px;background:linear-gradient(to bottom,#f9f9f9,#f1f1f1);}
.re th{height:25px;line-height:25px;vertical-align:top;border-right:1px #ddd solid;padding:0 4px;}
.re th:last-child{border-right:none;}
.re th:first-child{width:40px;}
.re tr td:first-child(){text-align:center;background:linear-gradient(to bottom,#f9f9f9,#f1f1f1);}
.re td{height:25px;padding:0 4px;border:1px solid #ddd;}
/*分页*/
#page_navigation{padding:10px 0;border:1px solid #CCCCCC;border-top:none;background:-webkit-linear-gradient(to bottom,#f9f9f9,#f1f1f1);background:linear-gradient(to bottom,#f9f9f9,#f1f1f1);}
.previous_link span,.next_link span,#page_navigation span{width:16px;height:16px;min-width:16px;background:url(../image/pagination_icons.png) no-repeat;}
#page_navigation span{background:none;padding:3px;margin:2px 3px;}
#page_navigation span:first-of-type:before{content:"";padding:0 5px;border-left:1px solid #CCCCCC;}
#page_navigation span:last-of-type:after{content:"";padding:0 5px;border-right:1px solid #CCCCCC;}
#page_navigation a{padding:3px;margin:2px;color:black;text-decoration:none;box-sizing:border-box;}
.active_page{background:#1395ed;color:white !important;}
/*页码*/
.num_box{height:17px;width:30px;display:inline-block;text-align:center;border:1px solid #CCCCCC;padding:1px 0 2px 0;margin:-1px 3px 0 3px;border-radius:0px;}

附件:下载该文件资源,减少时间成本(增值服务)