html用ajax获取数据后分页，非常简单！pagehelper分页插件+html+springboot |
您所在的位置：网站首页 › 搜索结果分页 › html用ajax获取数据后分页，非常简单！pagehelper分页插件+html+springboot |
html用ajax获取数据后分页，非常简单！pagehelper分页插件+html+springboot
|
这是第三篇分页，之前的两种分页在数据越来越多并且功能需求上已经不能够满足。
themleaf结合mybatis的pagehelper分页插件分页纯js分页
下面是先分析一下原因，如果不想看可以直接往下看代码
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分页插件，拿到单页数据后显示。
下面是我的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 = '共'+totalPages+'页,当前第'+pageNum+'页'; var tempStr1 = ""; if(pageNum>1){ tempStr1 += "首页"; tempStr1 += "上一页" }else{ tempStr1 += "首页"; tempStr1 += "上一页"; } if(totalPages tempStr1 += ""+ pageIndex +""; } } else{ // 例如总页数是10，要显示的分页条是5条，1,2,3,4,5 // 如果是后面的几个页码,从最后几个条码中间点的后一个点开始，页码条不变。 if(pageNumtotalPages-pasint){ for(var pageIndex= totalPages-pa+1;pageIndex // 如果显示的是单数， if(midle==1){ // 页码是1-中间点之前的，页码条不会变动 if(pageNum>=1&&pageNum tempStr1 += ""+ pageIndex +""; } } // 则刚好对半 else{ for(var pageIndex=pageNum-pasint;pageIndex // 因为是现实偶数，没有中间点，则把点设在对半分的左边最后一个点。页码是1-点之前的，页码条不会变动 if(pageNum>=1&&pageNum tempStr1 += ""+ pageIndex +""; } } // 双数的话显示的是当前页减去页码数量除以2的值是页码条第一个数字，最后一个数字是加上一半的数量减1 else{ for(var pageIndex=pageNum-pasint+1;pageIndex tempStr1 += "下一页"; tempStr1 += "尾页"; }else{ tempStr1 += "下一页"; tempStr1 += "尾页"; } 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) ; }
配置类，复制就可以 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);
然后，就没有然后了。就这么简单。 下面是样式 .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; } |
在页面中加入这个div，名字什么的改的话在js中要改掉
前端内容就结束了，现在写后台。 添加依赖
【本文地址】