作者:故事我忘了
个人微信公众号:程序猿的月光宝盒

//当前页
private int pageNum;
//每页的数量
private int pageSize;
//当前页的数量
private int size;
//总页数
private int pages;
//第一页
private int firstPage;
//上一页
private int prePage;
//下一页
private int nextPage;
//总记录数
private long total; //由于startRow和endRow不常用,这里说个具体的用法
//可以在页面中"显示startRow到endRow 共size条数据"
//当前页面第一个元素在数据库中的行号
private int startRow;
//当前页面最后一个元素在数据库中的行号
private int endRow; //结果集
private List<T> list; //是否为第一页
private boolean isFirstPage = false;
//是否为最后一页
private boolean isLastPage = false;
//是否有前一页
private boolean hasPreviousPage = false;
//是否有下一页
private boolean hasNextPage = false;
//导航页码数
private int navigatePages;
//所有导航页号
private int[] navigatepageNums;
//导航条上的第一页
private int navigateFirstPage;
//导航条上的最后一页
private int navigateLastPage;

项目中使用了Mybatis的PageHelper分页插件后的js文件

/**
* 初始化首页数据
*/
function initData(pageNo) {
//清空原来的数据,找到第一个以外的tr,并移除,用 :gt()
$("tr:gt(0)").remove();
$.ajax({
url: "showInvi.do",
type: "post",
dataType: "json",
data: {"pageNo": pageNo},
async: true,
success: function (obj) {
console.log(obj);
if (obj.size === 0) {//如果没有数据
var str = `
<tr>
<td colspan="5">没有符合条件的数据</td>
</tr>
`;
$("#dataTble").append(str);
$("p").html("");
} else {
$.each(obj.list, function (i) {
var str = `
<tr>
<td>${obj.list[i].title}</td>
<td>${obj.list[i].summary}</td>
<td>${obj.list[i].author}</td>
<td>${obj.list[i].createdate}</td>
<td>
<a href="/showReply.html?invid=${obj.list[i].id}">查看回复</a>||<a href="javascript:void(0);" onclick="del(${obj.list[i].id},'${obj.list[i].title}');">删除</a>
</td>
</tr>
`;
$("#dataTble").append(str);
});
$("tr:gt(0):odd").attr("style", "background-color:#90EE90");
//分页,我是放在一个p标签里
var pageFoot = $("p"); //在分页前,清空原来分页的内容
pageFoot.html("");
var pageStr = "";
if (obj.total === 0) {//如果没有数据,就不显示分页条
return;
}
if (obj.isFirstPage && obj.hasNextPage) {//如果是第一页,并且还有下一页
pageStr = `
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">首&nbsp;页</a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一页</a>|
<a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一页>></a>|
<a href="javascript:void(0);" onclick="initData(${obj.pages});">尾&nbsp;页</a>
`
} else if (obj.isFirstPage && !obj.hasNextPage) {//如果是第一页,并且没有下一页
pageStr = ``//nothing to do
} else if (!obj.isFirstPage && obj.hasNextPage) {//如果不是第一页,并且还有下一页
pageStr = `
<a href="javascript:void(0);" onclick="initData(1)">首&nbsp;页</a>|
<a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一页</a>|
<a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一页>></a>|
<a href="javascript:void(0);" onclick="initData(${obj.pages});">尾&nbsp;页</a>
`
} else if (!obj.isFirstPage && !obj.hasNextPage) {//如果不是第一页,且没有下一页
pageStr = `
<a href="javascript:void(0);" onclick="initData(${obj.firstPage});">首&nbsp;页</a>|
<a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一页</a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">下一页>></a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">尾&nbsp;页</a>
`
}
pageStr += `
第&nbsp;
${obj.pageNum}
页/共
${obj.pages}
页(${obj.total}条)
`;
pageFoot.append(pageStr);
}
}, error: function () {
alert("initData error");
}
})
}

基本上分页部分可以作为模板

他对应的html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<center>
<h1>帖子列表</h1>
<hr/>
<form id="findInvis">
帖子标题:
<input title="请输入帖子标题" name="title">
<!--input的类型还是submit-->
<input type="submit" value="搜索" >
</form>
<div id="infos">
<br/>
<table border="1" style="width: 100%;text-align: center" id="dataTble">
<tr style="background-color: #6FABC1;">
<td>标题</td>
<td>内容摘要</td>
<td>作者</td>
<td>发布时间</td>
<td>操作</td>
</tr>
</table>
<p></p>
</div>
</center>
<script rel="script" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script rel="script" type="text/javascript" src="js/list.js"></script>
</body>
</html>

对应的ServiceImpl

@Override
public PageInfo<Map<String, Object>> selectByPrimaryKey(Integer invid,Integer pageNo) {
PageHelper.startPage(pageNo,4);
List<Map<String, Object>> maps = replyDetailMapper.selectByPrimaryKey(invid);
return new PageInfo<> (maps);
}

对应的Controller,是标注@RestController

@RequestMapping("/showInvi.do")
public PageInfo<Map<String, Object>> selectByTitle(Invitation invitation,Integer pageNo) {
return invitationService.selectByTitle(invitation,pageNo);
}

页面分页模板部分

 success : function(obj) {
console.log(obj);
var strData ="";
//在循环的前面清空标题以下的所有行
//获取行>1的那行.调用移除方法
$("tr:gt(1)").remove();
$.each(obj.list,function (i) {
strData +=`
<tr>
<th>${obj.list[i].id}</th>
<th>${obj.list[i].name}</th>
<th>${obj.list[i].age}</th>
<th>${obj.list[i].gender}</th>
<th>${obj.list[i].telephone}</th>
<th>${obj.list[i].email}</th>
<th>${obj.list[i].cname}</th>
<th>
<a href="updates.html?id=${obj.list[i].id}">更新</a>
<a href="javascript:void(0);" onclick="del(${obj.list[i].id})">删除</a>
</th>
</tr>
`;
});
//找到table,并拼接
$("table").append(strData);
//分页
//在分页前,清空原来分页的内容
$("p").html("");
var pageStr = "";
if (obj.total === 0) {//如果没有数据,就不显示分页条
return;
}
if (obj.isFirstPage && obj.hasNextPage) {//如果是第一页,并且还有下一页
pageStr = `
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">首&nbsp;页</a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一页</a>|
<a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一页>></a>|
<a href="javascript:void(0);" onclick="initData(${obj.pages});">尾&nbsp;页</a>
`
} else if (obj.isFirstPage && !obj.hasNextPage) {//如果是第一页,并且没有下一页
pageStr = ``//nothing to do
} else if (!obj.isFirstPage && obj.hasNextPage) {//如果不是第一页,并且还有下一页
pageStr = `
<a href="javascript:void(0);" onclick="initData(1)">首&nbsp;页</a>|
<a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一页</a>|
<a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一页>></a>|
<a href="javascript:void(0);" onclick="initData(${obj.pages});">尾&nbsp;页</a>
`
} else if (!obj.isFirstPage && !obj.hasNextPage) {//如果不是第一页,且没有下一页
pageStr = `
<a href="javascript:void(0);" onclick="initData(${obj.firstPage});">首&nbsp;页</a>|
<a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一页</a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">下一页>></a>|
<a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">尾&nbsp;页</a>
`
}
pageStr += `
第&nbsp;
${obj.pageNum}
页/共
${obj.pages}
页(${obj.total}条)
`;
$("p").append(pageStr);
},

Mybatis的PageHelper分页插件的PageInfo的属性参数,成员变量的解释,以及页面模板的更多相关文章

  1. SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页

    SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页 **SpringBoot+Mybatis使用Pagehelper分页插件自动分页,非常好用,不用在自己去计算和组装了. ...

  2. Springboot 系列(十二)使用 Mybatis 集成 pagehelper 分页插件和 mapper 插件

    前言 在 Springboot 系列文章第十一篇里(使用 Mybatis(自动生成插件) 访问数据库),实验了 Springboot 结合 Mybatis 以及 Mybatis-generator 生 ...

  3. 【spring boot】14.spring boot集成mybatis,注解方式OR映射文件方式AND pagehelper分页插件【Mybatis】pagehelper分页插件分页查询无效解决方法

    spring boot集成mybatis,集成使用mybatis拖沓了好久,今天终于可以补起来了. 本篇源码中,同时使用了Spring data JPA 和 Mybatis两种方式. 在使用的过程中一 ...

  4. Spring Boot整合tk.mybatis及pageHelper分页插件及mybatis逆向工程

    Spring Boot整合druid数据源 1)引入依赖 <dependency> <groupId>com.alibaba</groupId> <artif ...

  5. springboot如何集成mybatis的pagehelper分页插件

    mybatis提供了一个非常好用的分页插件,之前集成的时候需要配置mybatis-config.xml的方式,今天我们来看下它是如何集成springboot来更好的服务的. 只能说springboot ...

  6. 小白的springboot之路(十五)、mybatis的PageHelper分页插件使用

    0.前言 用mybatis,那么分页必不可少,基本都是用PageHelper这个分页插件,好用方便: 1.实现 1.1.添加依赖: <!-- 3.集成 mybatis pagehelper--& ...

  7. 后端——框架——持久层框架——Mybatis——补充——pageHelper(分页)插件

    Pagehelper插件的知识点大致可以分为三个部分 搭建环境,引入jar包,配置. 使用方式,只需要记住一种即可.类似于在写SQL语句中,可以left join,也可以right join,它们实现 ...

  8. Mybatis学习 PageHelper分页插件

    1.Maven依赖,注意使用PageHelper时的版本必须与Mybatis版本对应 1 <!-- 添加Mybatis依赖 --> 2 <dependency> 3 <g ...

  9. Mybatis第三方PageHelper分页插件原理

    ​ 欢迎关注公号:BiggerBoy,看更多文章 原文链接:https://mp.weixin.qq.com/s?__biz=MzUxNTQyOTIxNA==&mid=2247485158&a ...

随机推荐

  1. Shell入门01-bash Shell特性

    命令和文件自动补齐 [root@hadoop04 ~]# yum -y install bash-completion 命令历史记忆功能 1.上下键 查看历史命令 2.!number 执行histor ...

  2. 走近深度学习,认识MoXing:初识华为云ModelArts的王牌利器 — MoXing

    [摘要] 本文为MoXing系列文章第一篇,主要介绍什么是MoXing,MoXing API的优势以及MoXing程序的基本结构. MoXing的概念 MoXing是华为云深度学习服务提供的网络模型开 ...

  3. “setTimeout、Promise、Async/Await 的区别”题目解析和扩展

    解答这个题目之前,先回顾下JavaScript的事件循环(Event Loop). JavaScript的事件循环 事件循环(Event Loop):同步和异步任务分别进入不同的执行"场所& ...

  4. segment树(线段树)

    线段树(segment tree)是一种Binary Search Tree或者叫做ordered binary tree.对于线段树中的每一个非叶子节点[a,b],它的左子树表示的区间为[a,(a+ ...

  5. NRF5340首款双核处理器无线SoC

    nRF5340基于Nordic经过验证并在全球范围广泛采用的nRF51和nRF52系列多协议SoC而构建,同时引入了具有先进安全功能的全新灵活双处理器硬件架构,支持包括蓝牙5.1/低功耗蓝牙 (Blu ...

  6. Spring Data JPA 的一对多,一对多,多对多操作

    一对一的关联关系   需求:用户与角色的一对一的关联关系 用户:一方 角色:一方     创建 Users 实体 @Entity @Table(name = "t_users") ...

  7. jQuery中的层级选择器

    话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  8. nitacm20317 来自张司机的挑战书

    题目:让你求从x到y中(1<=x<=y<=10^18),二进制一的个数最多的数是哪个,如果有多个相同的答案,输出最小的. 题目链接:https://www.nitacm.com/pr ...

  9. CF372C Watching Fireworks is Fun(单调队列优化DP)

    A festival will be held in a town's main street. There are n sections in the main street. The sectio ...

  10. HDU-6115

    我们将A省简化为由N个城市组成,某些城市之间存在双向道路,而且A省的交通有一个特点就是任意两个城市之间都能通过道路相互到达,且在不重复经过城市的情况下任意两个城市之间的到达方案都是唯一的.聪明的你一定 ...