jquery.pagination.js+Ajax动态分页

jquery.pagination.js+Ajax动态分页

首先引入jquery组件 jquery.pagination.js，以及css样式pagination.css

 <link rel="stylesheet" type="text/css" href="css/pagination.css" />
 <script src="./jquery.pagination.js"></script>
 <script src="jquery.js"></script>

HTML代码

<div class="setPageDiv">
	<div class="Pagination" id="pagination"></div>
</div>

调用组件jquery.pagination.js的js代码

$('.Pagination').pagination(pageNum, {
			num_edge_entries: 1, //边缘页数
			num_display_entries: 4, //主体页数
			items_per_page: 1, //每页显示1项
			prev_text: "上一页",
			next_text: "下一页",
			current_page: 0,
			callback: function(index) {//翻页触发
				console.log("当前页码数"+index);
			}
		})

可用参数如下表：
options(参数配置)

参数	默认值	说明
pageCount	9	总页数
totalData	0	数据总条数
current	1	当前第几页
showData	0	每页显示的条数
prevCls	‘prev’	上一页class
nextCls	‘next’	下一页class
prevContent	‘<’	上一页节点内容
nextContent	‘>’	下一页节点内容
activeCls	‘active’	当前页选中状态class名
count	3	当前选中页前后页数
coping	false	是否开启首页和末页，值为boolean
isHide	false	总页数为0或1时隐藏分页控件
keepShowPN	false	是否一直显示上一页下一页
homePage	’ ’	首页节点内容，默认为空
endPage	‘’	尾页节点内容，默认为空
jump	false	是否开启跳转到指定页数，值为boolean类型
jumpIptCls	‘jump-ipt’	文本框内容
jumpBtnCls	‘jump-btn’	跳转按钮class
jumpBtn	‘跳转’	跳转按钮文本内容
callback	function(){}	回调函数，参数"index"为当前页

用Ajax发起请求获取当前总的数据条数

$.ajax({
			url: 'data/page.json',
			//type: 'GET',
			type:'POST',
			dataType: 'json',
			success: function(data) {
				var dataL = data.list.length;//总条数
				console.log("总条数："+dataL);
			}
	})

在Ajax请求成功的回调函数里调用jquery.pagination.js

$.ajax({
			url: 'data/page.json',
			//type: 'GET',
			type:'POST',
			dataType: 'json',
			success: function(data) {
				//1.计算分页数量
				var showNum = num; //每页条数
				var dataL = data.list.length;//总条数
				var pageNum = Math.ceil(dataL / showNum);//总页数
				$('.Pagination').pagination(pageNum, {
						num_edge_entries: 1, //边缘页数
						num_display_entries: 4, //主体页数
						items_per_page: 1, //每页显示1项
						prev_text: "上一页",
						next_text: "下一页",
						current_page: 0,
						callback: function(index) {
							console.log("成功触发！");
						}
					})
			}
	})

在翻页时进行Ajax请求

第一次Ajax请求只获取了第一页的数据，在点击其他页码的时候还要再次对后台发起Ajax请求，避免一次请求的数据过多，分担服务器压力。

$.ajax({
			url: 'data/page.json',
			//type: 'GET',
			type:'POST',
			dataType: 'json',
			success: function(data) {
				//1.计算分页数量
				var showNum = num; //每页条数
				var dataL = data.list.length;//总条数
				var pageNum = Math.ceil(dataL / showNum);//总页数
				$('.Pagination').pagination(pageNum, {
						num_edge_entries: 1, //边缘页数
						num_display_entries: 4, //主体页数
						items_per_page: 1, //每页显示1项
						prev_text: "上一页",
						next_text: "下一页",
						current_page: 0,
						callback: function(index) {
							$.ajax({
									url: 'data/page.json',
									type: 'GET',
									type: 'POST',
									data:{
									 	"pageSize":5,
										"pageNum":index
									},
									dataType: 'json',
									success: function(data) {
										console.log("请求成功！");
									}
							})
						}
					})
			}
	})

完整js代码

$(function() {
					function getMsg(num) {
						$.ajax({
							url: 'data/page.json',
							//type: 'GET',
							type:'POST',
							dataType: 'json',
							success: function(data) {
								//1.计算分页数量
								var showNum = num; //每页条数
								var dataL = data.list.length;//总条数
								var pageNum = Math.ceil(dataL / showNum);//总页数
								var html = "";
								for(var i = showNum ; i < showNum ; i++) {
									if(i < dataL) {
										var state = data.list[i].state;
										var news = data.list[i].news;
										var id = data.list[i].id; //交易类型
										html +="<tr class='text-c'>"
											html +="<td><input type='checkbox' value='"+id+"'></td>"
											html +="<td>"+id+"</td>"								
											html +="<td>"+state+"</td>"
											html +="<td class='td-status'><span class='label radius'>已停用</span></td>"
											html +="<td class='td-manage'><a style='text-decoration:none' onClick=\"corporateAuditing_start(this,'10001')\" href='javascript:;' title='启用'><i class='Hui-iconfont'>&#xe615;</i></a></td>"
											html +="<td>"+news+"</td>"
											html +="<td> <a title='删除' href='javascript:;' οnclick=\"corporateAuditing_del(this,'1')\" class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'>&#xe6e2;</i></a></td>"
										    html +="</tr>"	
										
									}
								}
										
								$('.list').html(html)
								// return pageNum;
								$('.Pagination').pagination(pageNum, {
									num_edge_entries: 1, //边缘页数
									num_display_entries: 4, //主体页数
									items_per_page: 1, //每页显示1项
									prev_text: "上一页",
									next_text: "下一页",
									current_page: 0,
									callback: function(index) {
										$.ajax({
											url: 'data/page.json',
											//type: 'GET',
											 type: 'POST',
											data:{
													"pageSize":5,
											 		"pageNum":index
											 	},
											dataType: 'json',
											success: function(data) {
												var html = "";
												console.log(index);
												for(var i = showNum * index; i < showNum * index + showNum; i++) {
													if(i < dataL) {
														var state = data.list[i].state;
														var news = data.list[i].news;
														var id = data.list[i].id; //交易类型
														html +="<tr class='text-c'>"
															html +="<td><input type='checkbox' value='"+id+"'></td>"
															html +="<td>"+id+"</td>"								
															html +="<td>"+state+"</td>"
															html +="<td class='td-status'><span class='label radius'>已停用</span></td>"
															html +="<td class='td-manage'><a style='text-decoration:none' onClick=\"corporateAuditing_start(this,'10001')\" href='javascript:;' title='启用'><i class='Hui-iconfont'>&#xe615;</i></a></td>"
															html +="<td>"+news+"</td>"
															html +="<td> <a title='删除' href='javascript:;' οnclick=\"corporateAuditing_del(this,'1')\" class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'>&#xe6e2;</i></a></td>"
															html +="</tr>"	
														
													}
												}
				
												$('.list').html(html)
												// return pageNum;
											},
											})
										}
								})
		
							}
						})
					}
					getMsg(5)
				})

效果图：