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

//当前页
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. java调用webservice,比较简单方便的方法。

    首先,请同学们自行了解webservice的基础知识. 个人理解,webservice约等于使用http+xml技术进行跨平台的数据交互. http和xml我们都很熟悉了,把他们两个组合到一起就是we ...

  2. 【华为云网络技术分享】HTTP重定向HTTPS配置指南

    [摘要] 本文介绍使用华为云弹性负载均衡配置Http重定向到Https的方法. 1. HTTP.HTTPS 头部标识 ELB 对 HTTPS 进行代理,无论是 HTTP 还是 HTTPS 请求,到了  ...

  3. 为什么说 Java 中只有值传递?

    对于初学者来说,要想把这个问题回答正确,是比较难的.在第二天整理答案的时候,我发现我竟然无法通过简单的语言把这个事情描述的很容易理解,遗憾的是,我也没有在网上找到哪篇文章可以把这个事情讲解的通俗易懂. ...

  4. npm 安装/删除/发布/更新/撤销 发布包

    目录 一. npm安装包 1.1 什么时候用本地/全局安装? 1 当你试图安装命令行工具的时候,例如 grunt CLI的时候,使用全局安装 2. 当你试图通过npm install 某个模块,并通过 ...

  5. Spring Boot Validation,既有注解不满足,我是怎么暴力扩展validation注解的

    前言 昨天,我开发的代码,又收获了一个bug,说是界面上列表查询时,正常情况下,可以根据某个关键字keyword模糊查询,后台会去数据库 %keyword%查询(非互联网项目,没有使用es,只能这样了 ...

  6. 数理统计(一)——用Python进行方差分析

    数理统计(一)——Python进行方差分析 iwehdio的博客园:https://www.cnblogs.com/iwehdio/ 方差分析可以用来推断一个或多个因素在其状态变化时,其因素水平或交互 ...

  7. ARTS-S golang goroutines and channels(二)

    向tcp服务端发消息 package main import ( "io" "log" "net" "os" ) fun ...

  8. FPGA_VIP_V101 视频开发板 深入调试小结

    FPGA_VIP_V101 推出已经有半年有余,各项功能例程已移植完毕,主要参考crazybingo例程进行移植和结合开发板设计了几个实例例程 主要包含: 硬件配置: FPGA:EP4CE6E22C8 ...

  9. Orleans[NET Core 3.1] 学习笔记(三)( 1 )本地开发配置

    本地开发配置 本地开发和调试的时候,我们可能不需要去关注集群和网络ip端口.所以对于本地开发模式,Orleans给了我们比较简单的配置方式. Silo配置 在本地开发的配置模式下,Orleans会默认 ...

  10. rails 创建项目、创建controller、model等

    rails2之前创建新项目: rails3以及更高版本创建新项目:rails new webname 创建数据表model:rails g model user name:string sex:str ...