大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
一、前言:
分页功能在项目中时常用到,一款可以快速实现分页功能的插件非常有必要,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,就是为了点击分页按钮再次显示数据。
推荐pagination插件下载地址:http://download.csdn.net/detail/baidu_25343343/9822636
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234848.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...