这是第三篇分页,之前的两种分页在数据越来越多并且功能需求上已经不能够满足。
下面是先分析一下原因,如果不想看可以直接往下看代码
themleaf结合mybatis的pagehelper分页插件分页
- 优点:使用非常的简单,mybatis的pagehelper分页插件都封装好了,只需要传入要查询的页码,就可以了。查询数据是每次只查询一页的内容。查询快。显示分页栏也非常方便快捷。如果分页是不带查询功能的,推荐使用这个。
- 不足:但是通过themleaf的链接href提交后台的时候,如果带查询功能是中文关键字,url中就会编码错误直接报错。并且后台传回来的数据是装到 model的addAttribute,返回值是跳到页面,通过themleaf表达式显示,当然也可以用js接收显示,但是显然已经超出原本简单快捷的初衷。
model.addAttribute(“temperatureRecordLists”, temperatureRecordLists);
return “temperatureList.html”; - 改进:能否直接在页面上对中文进行编码再传到后台。
- 思考:需要js来编码,编码后我要怎么放到themleaf的href中?如果用ajax提交,那么返回值是页面的话我要怎么拿到相应的数据进行显示?
纯js分页
- 优点:因为是ajax提交数据,可以对中文编码直接传到后台,甚至可以不编码,直接传到后台也不会出错。
- 不足:js分页是查询了所有的内容后往页面上显示后通过display的值来对不需要显示的数据进行隐藏。当数据量非常大的时候,查询速度很慢,那么页面会很久很久都出不来。
所以,我自己写了一个分页。结合了ajax和mybatis的pagehelper分页插件,拿到单页数据后显示。
在页面中加入这个div,名字什么的改的话在js中要改掉
<div class="role28" id="barcon" name="barcon">
<div class="form-control-label role29" id="a1"></div>
<ul id="a2" class="role30">
</ul>
</div>
下面是我的js,后台是跳到这个页面后自执行getAlarm(1)去获取数据显示到页面上。一般来说刚进去显示都是第一页的内容
可以直接用的部分是下面的分页开始到分页结束之间的内容,直接复制到你的js中,想怎么用你自行修改。我这个写的差不多了。但是有几个数据是一定要拿到的,至于你修改怎么拿到是你自己的事情哦。
// 总页数
var totalPages = data.totalPages;
// 当前页
var pageNum = data.pageNum;
// 分页条数
var pa = data.navigatePages;
$(function() {
getAlarm(1);
})
// 报警信息
function getAlarm(pageIndex) {
//这里获取的内容是搜索框的内容,如果没有搜索功能可以在url中去掉,后台接口如果没有使用可以为空值的参数,那么你要把你的接口去掉这个参数
var vin = $("#vin").val();
var grade = $("#grade").val();
var url = '/alarmMonitor/getAlarm?vin=' + vin + '&grade=' + grade+'&pageIndex='+pageIndex;
$
.ajax({
url : url,
type : 'get',
dataType : 'json',
success : function(data) {
//拿到数据后对数据进行展示,用js来输出内容,例如下图。拿到的数据直接就是该显示那一页的数据,循环展示就可以了。
// 分页开始
// 总页数
var totalPages = data.totalPages;
// 当前页
var pageNum = data.pageNum;
// 分页条数
var pa = data.navigatePages;
var midle=pa%2;
var pasint=parseInt(pa/2);
var tempStr = '<lable style="width:100%;height:20px;padding-left:7px;font-size:12pt;font-family:Microsoft YaHei; background-repeat:repeat-x; display:block; margin-top: 5px;color: #8ec6d8;">共'+totalPages+'页,当前第'+pageNum+'页</lable>';
var tempStr1 = "";
if(pageNum>1){
tempStr1 += "<ul class='pagination'><li class='page-item'><a class='page-link' onClick=\"goPage("+(1)+")\">首页</a></li>";
tempStr1 += "<li class='page-item'><a class='page-link' onClick=\"goPage("+(pageNum-1)+")\">上一页</a></li>"
}else{
tempStr1 += "<ul class='pagination'><li class='page-item'><a class='page-link'>首页</a></li>";
tempStr1 += "<li class='page-item'><a class='page-link'>上一页</a></li>";
}
if(totalPages<=pa){
for(var pageIndex= pageNum;pageIndex<totalPages+1;pageIndex++){
tempStr1 += "<li class='page-item' id=\"page"+pageIndex+"\"><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
else{
// 例如总页数是10,要显示的分页条是5条,1,2,3,4,5
// 如果是后面的几个页码,从最后几个条码中间点的后一个点开始,页码条不变。
if(pageNum<=totalPages&&pageNum>totalPages-pasint){
for(var pageIndex= totalPages-pa+1;pageIndex<totalPages+1;pageIndex++){
tempStr1 += "<li class='page-item' id=\"page"+pageIndex+"\"><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
else{
// 如果显示的是单数,
if(midle==1){
// 页码是1-中间点之前的,页码条不会变动
if(pageNum>=1&&pageNum<=pasint+1){
for(var pageIndex= 1;pageIndex<=pa;pageIndex++){
tempStr1 += "<li class='page-item' id=\"page"+pageIndex+"\"><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
// 则刚好对半
else{
for(var pageIndex=pageNum-pasint;pageIndex<=pageNum+pasint;pageIndex++){
tempStr1 += "<li class='page-item' id=\"page"+pageIndex+"\"><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
}
// 如果显示的是双数,左边比右边少一个
else if(midle==0){
// 因为是现实偶数,没有中间点,则把点设在对半分的左边最后一个点。页码是1-点之前的,页码条不会变动
if(pageNum>=1&&pageNum<=pasint){
for(var pageIndex= 1;pageIndex<=pa;pageIndex++){
tempStr1 += "<li class='page-item' id=\"page"+pageIndex+"\"><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
// 双数的话显示的是当前页减去页码数量除以2的值是页码条第一个数字,最后一个数字是加上一半的数量减1
else{
for(var pageIndex=pageNum-pasint+1;pageIndex<=pageNum+pasint;pageIndex++){
tempStr1 += "<li class='page-item' id=\"page"+pageIndex+"\"><a class='page-link' οnclick=\"goPage("+pageIndex+")\">"+ pageIndex +"</a></li>";
}
}
}
}
}
if(pageNum<totalPages){
tempStr1 += "<li class='page-item'><a class='page-link' onClick=\"goPage("+(pageNum+1)+")\">下一页</a></li>";
tempStr1 += "<li class='page-item'><a class='page-link' onClick=\"goPage("+(totalPages)+")\">尾页</a></li></ul>";
}else{
tempStr1 += "<li class='page-item'><a class='page-link'>下一页</a></li>";
tempStr1 += "<li class='page-item'><a class='page-link'>尾页</a></li></ul>";
}
document.getElementById("a1").innerHTML = tempStr;
document.getElementById("a2").innerHTML = tempStr1;
//这句话是把当页的那个按钮显示不同的颜色
var obj = document.getElementById("page"+pageNum);
obj.className += ' active';
// 分页结束
},
error : function() {
alert('服务器超时,请重试!');
}
});
}
// 查分页
function goPage(pageIndex) {
getAlarm(pageIndex) ;
}
前端内容就结束了,现在写后台。
添加依赖
<!-- mybatis分页功能 -->
<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.6</version>
</dependency>
配置类,复制就可以
import java.util.Properties;
import org.apache.ibatis.session.Configuration;
import org.mybatis.spring.boot.autoconfigure.ConfigurationCustomizer;
import org.springframework.context.annotation.Bean;
import com.github.pagehelper.PageHelper;
@org.springframework.context.annotation.Configuration
public class MyBatisConfig {
@Bean
public ConfigurationCustomizer configurationCustomizer() {
return new ConfigurationCustomizer() {
@Override
public void customize(Configuration configuration) {
configuration.setMapUnderscoreToCamelCase(true);
}
};
}
@Bean
public PageHelper pageHelper() {
PageHelper pageHelper = new PageHelper();
// 添加配置,也可以指定文件路径
Properties p = new Properties();
p.setProperty("offsetAsPageNum", "true");
p.setProperty("rowBoundsWithCount", "true");
p.setProperty("reasonable", "true");
pageHelper.setProperties(p);
return pageHelper;
}
}
在你的后台接口中加入参数
@RequestParam(value = “pageIndex”, defaultValue = “1”, required = false) Integer pageIndex
方法中一定要有的5句话,并且第一句话一定要在做查询之前写
PageHelper.startPage(pageIndex, 3);
//这部分写你的查询代码,查询语句不需要做limit查询,查询符合条件的就行
//5是分页中显示几个数字,下图
PageInfo pageInfo = new PageInfo(alarmlist,5);
// 获得当前页
json.put("pageNum", pageInfo.getPageNum());
// 获得总页数
json.put("totalPages", pageInfo.getPages());
json.put("navigatePages", pageInfo.getNavigatepageNums().length);
下面是我自己的接口
@ResponseBody
@RequestMapping(value = "/getAlarm", method = { RequestMethod.POST, RequestMethod.GET })
public String getAlarm(
@RequestParam(value = "pageIndex", defaultValue = "1", required = false) Integer pageIndex,
@RequestParam(value = "grade", required = false) String grade,
@RequestParam(value = "vin", required = false) String vin) throws ParseException {
List<Map<String, Object>> alarmlist = new ArrayList<Map<String, Object>>();
JSONObject json = new JSONObject();
//此处的3是每页显示的数量
PageHelper.startPage(pageIndex, 3);
//查询,做你自己的查询即可,不需要带分页查询。
if ((!"".equals(grade) && grade != null) || (!"".equals(vin) && vin != null)) {
alarmlist = alarmMonitorMapper.getBykeyname(vin, grade);
} else {
alarmlist = alarmMonitorMapper.getAlarmInfo();
}
//5是分页中显示几个数字
PageInfo pageInfo = new PageInfo(alarmlist,5);
// 获得当前页
json.put("pageNum", pageInfo.getPageNum());
// 获得总页数
json.put("totalPages", pageInfo.getPages());
json.put("navigatePages", pageInfo.getNavigatepageNums().length);
json.put("alarmlist", alarmlist);
return json.toString();
}
然后,就没有然后了。就这么简单。
下面是样式
.role28 {
height: 200px;
width: 1000px;
}
.role29 {
float: left;
margin-top: 10px;
margin-left: 300px;
}
.role30 {
list-style: none;
float: left;
color: #8ec6d8;
cursor: pointer;
}
div {
display: block;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
.pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
ul ul {
list-style-type: circle;
margin-block-start: 0px;
margin-block-end: 0px;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
.pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
a:not ([href] ):not ([tabindex] ):hover, a:not ([href] ):not ([tabindex]
):focus {
color: inherit;
text-decoration: none;
}
.page-item:first-child .page-link {
margin-left: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.page-link:not(:disabled):not(.disabled){
cursor:pointer;
}
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #8ec6d8;
}