简介
现在网上各种各样的分页组件很多,但是很难找到十分“称心如意”的,于是jqPaginator诞生了。
我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中。以我浅显的经验来看,要达到这个目标,关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义,使其灵活的使用了各种不同的场景。
官网http://jqpaginator.keenwon.com/
下载
下载jquery,下载插件jqpaginator,下载bootstrap
https://download.csdn.net/download/qq_37126480/12067348
引入JQuery、BootStrap、jqpaginator
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jqpaginator.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
第一步、定义显示分页条的容器
在页面定义一个标签容器,这个容器里就是我们未来要显示的分页条
<!-- 分页按钮 -->
<div class="footer">
<ul class="pagination" id="pagination0"></ul>
</div>
第二步、初始化分页条
初始化分页条
总页数插件自己算,不用管
$.jqPaginator('#pagination0', {//这个选择器是容器的ID,必须和第一步的ID对应
totalCounts:1, //总记录数是1,先写死
pageSize:10,//每页显示10条记录
visiblePages: 10,//分页条显示10个页码
currentPage: 1,//默认是第一页
first:'<li class="first"><a href="javascript:;">首页</a></li>',
last:'<li class="first"><a href="javascript:;">尾页</a></li>',
prev : '<li class="prev"><a href="javascript:;">上页</a></li>',
next : '<li class="next"><a href="javascript:;">下页</a></li>',
page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
onPageChange: function (num, type) {//num表示被点击的那个页码
console.log(num);
}
});
第三步、编写onPageChange函数
该函数在分页条初始化完毕后会被执行一次,并且num=1
之后在每次点击页码的时候都会触发一次
分析后发现:这个函数中我们可以干两件事
1.把当前页码和每页显示的记录书以ajax形式发送给服务器
2.将写死的totalCounts配置更新为真实数据
代码如下
onPageChange: function (num, type) {//num表示被点击的那个页码
console.log("当前被点击的是第"+num+"页");
/*
做两件事
1.想servlet发送请求,请求当前页的数据
2.将写死的totalCounts修改为真实的总记录数
*/
$.get("route/pageQuery",
{
cid:location.search.split("=")[1],
currentPage:num,
pageSize:10
},function (pageBean) {
//用真实记录数替换原有写死的记录数
$('#pagination0').jqPaginator('option', {
totalCounts: pageBean.totalCount
}
);
});
}
完整代码
$(function () {
$.jqPaginator('#pagination0', {//这个选择器是容器的ID
totalCounts:100, //总记录数是1
pageSize:10,//每页显示10条记录
visiblePages: 10,//分页条显示10个页码
currentPage: 1,//默认是第一页
first:'<li class="first"><a href="javascript:;">首页</a></li>',
last:'<li class="first"><a href="javascript:;">尾页</a></li>',
prev : '<li class="prev"><a href="javascript:;">上页</a></li>',
next : '<li class="next"><a href="javascript:;">下页</a></li>',
page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
onPageChange: function (num, type) {//num表示被点击的那个页码
console.log("当前被点击的是第"+num+"页");
search(num);
}
});
/**
* 做两件事
* 1.想servlet发送请求,请求当前页的数据
* 2.将写死的totalCounts修改为真实的总记录数
* @param num 当前正在被点击的页码
*/
function search(num){
$.get("route/pageQuery",
{
cid:location.search.split("=")[1],
currentPage:num,
pageSize:10
},function (pageBean) {
$('#pagination0').jqPaginator('option', {
totalCounts: pageBean.totalCount
});
});
}
})
后端
后端只需要返回总记录数counts和查询结果lists即可
后端需要接受的数据:currentPage,pageSize,查询条件
分页对象 PageBean
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean<T> {
private List<T> rows;//要显示的数据
private Integer count;//总记录数
...省略set/get方法 toString等方法
}
创建一个ResultInfo实体类 用来封装对象
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResultInfo implements Serializable {
private boolean flag;//后端返回结果正常为true,发生异常返回false
private Object data;//后端返回结果数据对象
private String errorMsg;//发生异常的错误消息
...省略set/get方法 toString等方法
}
Servlet页面的方法
public ResultInfo queryPageByCid(HttpServletRequest request, HttpServletResponse response) {
try {
String cid_ = request.getParameter("cid");
if (StringUtils.isEmpty(cid_)) { //获取页面的cid
cid_ = "1";
}
int cid = Integer.parseInt(cid_);
String currentPage_ = request.getParameter("currentPage");
if (StringUtils.isEmpty(currentPage_)) {
currentPage_ = "1";
}
int currentPage = Integer.parseInt(currentPage_);
String pageSize_ = request.getParameter("pageSize");
if (StringUtils.isEmpty(pageSize_)) {
pageSize_ = "10";
}
int pageSize = Integer.parseInt(pageSize_);
//调用service
PageBean<Route> pageBean = routeService.queryPage(cid, currentPage, pageSize);
return new ResultInfo(true, pageBean, null);
} catch (Exception e) {
e.printStackTrace();
return new ResultInfo(false, null, "分页查询失败" + e.toString());
}
}