html用ajax获取数据后分页，非常简单！pagehelper分页插件+html+springboot

最新推荐文章于 2023-09-13 16:41:23 发布

welloffG

最新推荐文章于 2023-09-13 16:41:23 发布

阅读量3.2k

点赞数 2

分类专栏： springboot html mybatis

本文链接：https://blog.csdn.net/weixin_46305078/article/details/109525812

版权

springboot 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

mybatis

5 篇文章 0 订阅

订阅专栏

这是第三篇分页，之前的两种分页在数据越来越多并且功能需求上已经不能够满足。

下面是先分析一下原因，如果不想看可以直接往下看代码

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>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<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;
}

welloffG

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
html用ajax获取数据后分页，非常简单！pagehelper分页插件+html+springboot

这是第三篇分页，之前的两种分页在数据越来越多并且功能需求上已经不能够满足。themleaf结合mybatis的pagehelper分页插件分页纯js分页下面是先分析一下原因，如果不想看可以直接往下看代码themleaf结合mybatis的pagehelper分页插件分页优点：使用非常的简单，mybatis的pagehelper分页插件都封装好了，只需要传入要查询的页码，就可以了。查询数据是每次只查询一页的内容。查询快。如果分页是不带查询功能的，推荐使用这个。不足：但是通过themleaf的
复制链接

扫一扫