layui结合mybatis的pagehelper插件的分页通用的方法

　　总体思路：

　　　　1.前台查询的时候将当前页和页大小传到后台

　　　　2.后台将当前页，页大小以及数据与数据总数返回前台，前台显示完表格完数据之后显示分页插件。

前台页面:

　　准备查询条件的表单，与数据表格,分页div (同时需要在查询条件表单中准备隐藏当前页与页大小的文本框)

 <div class="layui-row"><%--查询条件的form--%><form class="layui-form layui-col-md12 x-so" id="queryTrainschemeForm"><%--隐藏当前页和页号--%><input type="hidden" name="pageNum"><input type="hidden" name="pageSize"><input type="text" name="trainingschemaname" placeholder="培养方案名称" autocomplete="off" class="layui-input"><input type="text" name="majorname" class="layui-input"  placeholder="专业名称" autocomplete="off"><input type="text" name="majorid" class="layui-input"  placeholder="专业代码" autocomplete="off"><div class="layui-input-inline"><select name="remark1"><option value="">编辑状态</option><option value="保存">保存</option><option value="已提交">已提交</option></select></div>
<%--            <div class="layui-input-inline"><select name="contrller"><option>是否使用</option><option>是</option><option>否</option></select></div>--%><button class="layui-btn" type="button" onclick="queryTrainSchemeFYBtn()"><i class="layui-icon"></i></button><button class="layui-btn layui-btn-normal" type="button" onclick='clearQueryCondition(this)' title="点击重置查询条件"><i class="layui-icon"></i></button></form></div><!--操作区域--><xblock><button class="layui-btn" onclick="x_admin_show('课程安排','./trainingScheme-course.html')">上传课程结构图</button><button class="layui-btn" onclick="x_admin_show('课程安排','./trainingScheme-course.html')">安排课程</button><button class="layui-btn" onclick="x_admin_show('课程安排','./trainingScheme-course.html')">安排课程能力</button><button class="layui-btn layui-btn-normal" onclick="">下载培养方案 </button></xblock><!--end 操作区域--><!--表格内容--><table class="layui-table"><thead><tr><th></th><th>序号</th><th>培养方案名称</th><th>专业名称</th><th>专业代码</th><th>学科门类</th><th>专业负责人</th><th>修业年限</th><th>修订人</th><th>修订时间</th><th>状态</th><th>操作</th></tr></thead><tbody id="trainSchemeTbody"><!--动态填充数据--></tbody></table><!--end 表格内容--><!--分页--><div id="pageDiv"></div><!--end 分页-->

效果:

JS:(重点)

　　解释:点击查询的时候将页号清空(这个有时候容易忘)，带着组合条件去后台查询，查询成功后将数据填充到表格之后显示分页组件。点击分页组件的页号与上下页的时候动态设置页面中隐藏域的值，同时调用查询方法。

　　点击清空条件按钮的时候清空所有的查询条件，同时清空页面隐藏的条件，并进行查询。

/*****S 分页查询相关方法**********/
function queryTrainSchemeFY(){$.ajax({url:contextPath+"/TrainScheme/getTrainSchemeFY.do",data:$("#queryTrainschemeForm").serialize(),dataType:'json',type:'post',async:true,success:showTrainSchemeTable});
}/*** 填充表格数据* @param pageInfo  ajax返回的参数信息*/
function showTrainSchemeTable(pageInfo){// alert(JSON.stringify(pageInfo))var total = pageInfo.total;//页总数var pageNum = pageInfo.pageNum;//页号var pageSize = pageInfo.pageSize;//页大小var trainschemes = pageInfo.list;$("#trainSchemeTbody").html("");//清空表格中数据并重新填充数据for(var i=0,length_1 = trainschemes.length;i<length_1;i++){var index = (pageNum - 1) * pageSize + i + 1;var tr = "<tr><td>"+'<input type="radio" name="trainshemeRadio" value="'+trainschemes[i].trainingSchemeID+'"><input type="hidden" value="'+trainschemes[i].trainingSchemeID+'"/></td>'+'<td>'+index+'</td>'+'<td>'+replaceNull(trainschemes[i].trainingSchemaName)+'</td>'+'<td>'+replaceNull(trainschemes[i].majorName)+'</td>'+'<td>'+replaceNull(trainschemes[i].majorID)+'</td>'+'<td>'+replaceNull(trainschemes[i].majorType)+'</td>'+'<td>'+replaceNull(trainschemes[i].majorManager)+'</td>'+'<td>'+replaceNull(trainschemes[i].trainYears)+'</td>'+'<td>'+replaceNull(trainschemes[i].revisePerson)+'</td>'+'<td>'+replaceNull(trainschemes[i].createTime)+'</td>'+'<td>'+replaceNull(trainschemes[i].remark1)+'</td>'+'<td>'+'<a title="点击查看课程详细信息" οnclick="openDetailLayer(this)" href=javascript:void(0)><i class="layui-icon"></i></a>'+'<a href=javascript:void(0) title="点击修改课程基本信息" οnclick="openUpdateLayer(this)"><i class="layui-icon"></i></a>'+'<a href=javascript:void(0) title="点击删除课程" οnclick="deleteCourseByCourseId(this)"><i class="layui-icon"></i></a>'+'</td></tr>'$("#trainSchemeTbody").append(tr);}//开启分页组件
    trainschemesPage(total,pageNum,pageSize);
}/*** layui的分页插件* @param total 总数* @param pageNum   当前页* @param pageSize  页大小*/
function trainschemesPage(total,pageNum,pageSize){//使用layui的分页插件layui.use(['laypage', 'layer'], function(){var laypage = layui.laypage,layer = layui.layer;//执行一个laypage实例
        laypage.render({elem: 'pageDiv', //注意，这里的 test1 是 ID，不用加 # 号count: total, //数据总数，从服务端得到limit:pageSize,//每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。curr:pageNum,//当前页号limits:[6,10,15,20],layout:['limit','prev', 'page', 'next','skip','count'],//显示哪些分页组件jump: function(obj, first){//点击页号的时候执行的函数//obj包含了当前分页的所有参数，比如：// console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。// console.log(obj.limit); //得到每页显示的条数
$("[name='pageNum']").val(obj.curr);//向隐藏域设置当前页的值$("[name='pageSize']").val(obj.limit);//向隐藏域设置当前页的大小if(!first){//首次不执行(点击的时候才执行)queryTrainSchemeFY();//执行查询分页函数(这个函数必须写在这里)
                }}});});
}/*** 点击查询放大镜的事件*/
function queryTrainSchemeFYBtn() {$("[name='pageNum']").val("");//清空页号queryTrainSchemeFY();//分页查询课程信息
}/*** 清空查询条件的按钮* 1.清空所有的条件，包括隐藏域的条件，2.重新查询一次* @param obj   将清空条件按钮自己传下来*/
function clearQueryCondition(obj) {//1.清空条件var form = $(obj).parents("form");form.find("input").val("");form.find("select").val("");//2.重新查询一次
    queryTrainSchemeFY();
}/*****E 分页查询相关方法**********/

如果我们想要当数据不足6条的时候不显示分页可以在调用分页组件之前判断:

    if(total < 6){return;}//开启分页组件usersPage(total,pageNum,pageSize);

后台Java代码:(返回PageInfo)

    /*** 分页查询培养方案基本信息* @param condition 自动映射的查询条件* @return  分页信息*/@RequestMapping("/getTrainSchemeFY")public PageInfo<Map<String,Object>> getTrainschemeinfosFY(@RequestParam Map condition){int pageNum = 1;if(ValidateCheck.isNotNull((String) condition.get("pageNum"))){ //如果不为空的话改变当前页号pageNum = Integer.parseInt((String) condition.get("pageNum"));}int pageSize = DefaultValue.PAGE_SIZE;if(ValidateCheck.isNotNull((String) condition.get("pageSize"))){ //如果不为空的话改变当前页大小pageSize = Integer.parseInt((String) condition.get("pageSize"));}//开始分页
        PageHelper.startPage(pageNum,pageSize);List<Map<String, Object>> trainschemeinfoByCondition = null;try {trainschemeinfoByCondition =  trainschemeinfoService.getTrainschemeinfoByCondition(condition);} catch (SQLException e) {e.printStackTrace();}PageInfo<Map<String,Object>> pageInfo = new PageInfo<Map<String,Object>>(trainschemeinfoByCondition);return pageInfo;}

返回数据格式:

转载于:https://www.cnblogs.com/qlqwjy/p/8983001.html

layui结合mybatis的pagehelper插件的分页通用的方法相关推荐

SSM中使用Mybatis的PageHelper插件实现分页
效果实现前言前面实现SSM整合以及实现原始手动分页参考 https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/85113289 添加 ...
java 分页_Spring Boot + MyBatis 如何借助PageHelper插件实现分页效果
概述上文中已经介绍了Spring和MyBatis的整合,在上文的基础上我们加入了PageHelper这个插件,来实现MyBatis列表查询的分页效果 PageHelper是啥 PageHelper是 ...
Spring + Mybatis 使用 PageHelper 插件分页
转载:http://blog.csdn.net/joker_zhou/article/details/50418005 先增加maven依赖: [html] view plaincopy print? ...
springboot+mybatis 利用PageHelper插件分页，结果第二页的返回分页信息还是和第一页一样。
正常使用PageHelper来分页时可以的,但是如果在查询list后做了非常多的处理,即解包在装包操作.可能最后返回时分页的数据查询的对,但是分页信息就有问题了.有的甚至分页功能都不行.这里为避免几个 ...
毕设IDEA2019之ssm多表分页模糊查询（PageHelper插件）
PageHelper插件实现分页查询请戳这. 本篇在分页的基础上实现模糊查询,因为单表有点简单,直接介绍多表,输入关键字查找相关内容,之前几篇有点脱离毕设项目了,这篇开始尽量用项目做例子.没什么好说的 ...
Mybatis插件原理和PageHelper结合实战分页插件（七）
今天和大家分享下mybatis的一个分页插件PageHelper,在讲解PageHelper之前我们需要先了解下mybatis的插件原理.PageHelper 的官方网站:https://github ...
Mybatis的插件 PageHelper 分页查询使用方法
Mybatis的一个插件,PageHelper,非常方便mybatis分页查询.国内牛人的一个开源项目,有兴趣的可以去看源码,都有中文注释(ps:某些源码一大堆英文,痛哭流涕!) 在github上仓库 ...
springboot2.0.5集成mybatis（PageHelper分页插件、generator插件使用）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/zab635590867/article ...
Springboot 系列（十二）使用 Mybatis 集成 pagehelper 分页插件和 mapper 插件
前言在 Springboot 系列文章第十一篇里(使用 Mybatis(自动生成插件) 访问数据库),实验了 Springboot 结合 Mybatis 以及 Mybatis-generator 生 ...