jQuery-paginatin 带css样式不错的分页插件

一、前言

分页功能在项目中时常用到，一款可以快速实现分页功能的插件非常有必要，pagination–这款插件功能非常完美，几乎我所有项目中使用到分页的地方都会第一时间考虑到这个插件，但是其实有能力的同学最好还是使用原生的JS或者JQuery来开发分页功能，毕竟插件很多源码比较复杂，也并不是所有功能都做到尽善尽美，仅仅是提供一个方便而已。

二、具体使用方法：

1. 第一步，导入jquery和pagination.js

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

2. 第二步，HTML代码：
   非常简单只需要一个div标签

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

3. 第三步, JS代码：

$('.M-box').pagination({
    pageCount:50,
    jump:true,
    coping:true,
    homePage:'首页',
    endPage:'末页',
    prevContent:'上页',
    nextContent:'下页'
});

如图所示：

三、核心参数方法

使用方法是：

$('.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"为当前页

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

callback:function(api){
//回调函数。。。
}

该api接口的方法有如下：

方法	参数	说明
getPageCount()	无	获取总页数
setPageCount(page)	page：页数	设置总页数
getCurrent()	无	获取当前页
filling()	无	填充数据，参数为页数

四、AJAX动态分页

其实做分页最主要的就是通过AJAX来动态获取数据后进行分页显示，我们要明白的是，为什么分页？？

首页，因为数据库的数据是不可估量的，如果某一个系统的数据库数据有几千条甚至几万条，难道一个网页要把全部的数据都全部的展示出来吗？？那肯定是不合理的，因为这非常消耗系统内存和网络带宽，我们肯定都是在AJAX请求数据时，传入了要显示的条数和页数，服务器在根据条数和页数返回数据给我们，比如我们要显示10条数据，显示第一页的内容，那服务器就相应的把该条件下的数据传回给我们，仅仅10条，这对于数据库和网页显示来说毫无压力。所以这就有了分页功能的出现。如果有50条数据，每页只显示10条数据，那理所当然的就是有5页了，那问题又来了，难道这个分页怎么知道我每个页数需要显示什么内容呢？？？是我全部加载数据后平均分配到每一页10条数据，然后依次显示下去吗？？当然不是，我每当点击页数按钮的时候都要去加载数据，重新发起AJAX请求到服务器，然后返回数据给我们，那我们就大概知道怎么使用这个分页功能了！！

1. 首页，你得知道你分页按钮上需要显示几页吗？？例如5页的话就是5个按钮。
   所以首先必须使用AJAX请求得到所有数据的长度是多少，例如： 总共50条数据，我需要每页显示10条数据，当前 显示第一页的数据。

$.ajax({
	url:...
	type:"post",
	data:{
	rows:  10  //我把行数传回给服务器中
	page:1  //显示第一页的数据
},
success:function(data){
	//data.length  就是数据的长度 ，也就是上面的10，具体参数名看你们服务器的返回叫什么
	//data.count   是数据的总长度，也就是50，具体参数名看你们服务器的返回叫什么
	}
})

2. 然后我在success方法中写入pagination的方法进行分页

$.ajax({
url:...
type:"post",
data:{
rows:  10  //我把行数传回给服务器中
page:1  //显示第一页的数据
},
success:function(data){
//获取总条数
var sumCount=data.count;
//获取返回的条数
var count=data.length;
//重要的一步来了，需要获取我们按钮的个数，也就是分多少页，需要总条数除以返回数在向上取整
var pageCount=Math.ceil(sumCount/count);  //这里50除以10等于5，所以一共有5页
$('.M-box').pagination({
               pageCount:pageCount, //总页数 
               coping:true,//是否开启首页和尾页
               homePage:'首页',
               endPage:'末页',
               prevContent:'上页',
               nextContent:'下页',
               current:1,  //当前第几页
               callback:function(api){  //按钮、单击第几页、回调函数

			}
		});
	}
})

3. 现在最最关键的来了，就是分页中的回调函数的操作，也就是点击按钮需要做什么？？上面第四点中分析到，点击按钮需要重新发起AJAX请求，需要把显示条数和当前的页数传回给服务器

$.ajax({
	url:...
	type:"post",
	data:{
	rows:  10  //我把行数传回给服务器中
	page:1  //显示第一页的数据
	},
	success:function(data){
		//获取总条数
		var sumCount=data.count;
		//获取返回的条数
		var count=data.length;
		//获取分页数
		var pageCount=Math.ceil(sumCount/count);  //这里50除以10等于5，所以一共有5页
		$('.M-box').pagination({
	    	pageCount:pageCount, //总页数 
	       coping:true,//是否开启首页和尾页
	       homePage:'首页',
	       endPage:'末页',
	       prevContent:'上页',
	       nextContent:'下页',
	       current:1,  //当前第几页
	       callback:function(api){  //按钮、回调函数
			//再次发起AJAX请求
				$.ajax({
					url:...
					type:"post",
					data:{
					rows: 10, //依然显示10条数据
					page: api.getCurrent()// 非常关键的一步，这里就要用到api接口的方法中获取当前页的方法了，比如我点击第二页，当前页就是2，点击第三页，当前页就是3,
					},
					success:function(data){
					//ajax成功后的回调。。。
					}
				})
			}
		});
	}
})

以上基本的一个流程就是这样。具体一些api方法和参数可以去试试。

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

原文作者：冯小东
原文地址：https://blog.csdn.net/baidu_25343343/article/details/70478467
原文插件下载地址：http://download.csdn.net/detail/baidu_25343343/9822636
官方网站：https://codepen.io/togglelt/pen/OMKVgV

• jqpaginator分页插件学习

jqpaginator分页插件官网：http://jqpaginator.keenwon.com/
jqpaginator示例：https://www.22vd.com/32378.html