jquery 前端分页效果 jquery分页插件

分页功能在项目中时常用到, 在前段时间的工作中使用到一款pagination分页插件,在此做以下总结:

(一) 具体使用方法:

1. 引入相关的JS及CSS文件

<link rel="stylesheet" href="pagination.css" />

<script src="jquery.pagination.js"></script>

2. 引入一个div标签:

<div class="M-box"></div>

3.引入一段JS代码:

// 当前页
var pagenow = 1;
//总页数
var pageall = 0;

function loadPages(pageall) {
   $('.M-box').pagination({
	pageCount: pageall,
	jump: true,
	coping: true,
	current: pagenow,
	homePage: '首页',
	endPage: '末页',
	prevContent: '上页',
	nextContent: '下页',
	callback: function(p) {
	      pagenow = p.getCurrent();
	      //回调逻辑	
	}
  });
}

(二) 核心方法分析:

$('.M-box').pagination({option})

option的参数如下:

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"为当前页

其中回调函数是最核心的参数，即点击分页的数字按钮时所执行的操作，回调函数中有一个参数叫p

callback:function(p){

     //回调函数....
}

该回调函数相关接绍如下：
         getPageCount()   获取总页数
         setPageCount(page) 设置总页数
         getCurrent()获取当前页
         filling() 填充数据，参数为页数

(三) AJAX动态动态获取分页数据:

        请求参数1: 每页的记录数 pageSize

        请求参数2: 当前的页码 pageNow

        响应参数1: 每页的记录数据List

        响应参数2: 记录总数 totalCount

        通过相应参数 获取总页数:  var pageall = Math.ceil(totalCount / pageSize);

        分页中的回调函数的操作，也就是点击按钮需要做什么？？点击按钮需要重新发起AJAX请求，需要把每页显示条数和当前的页数传回给服务器,loadPages(pageall),然后再次发起AJAX请求,如此往复.

(四) 总结

        一个很主要的流程总结起来就是: 首先要发起ajax得到总记录数和返回的每页数据, 然后在success回调中使用pagination的方法，在callback回调中再次发起ajax，就是为了点击分页按钮再次显示数据。