总体思路：
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="点击查看课程详细信息" onclick="openDetailLayer(this)" href=javascript:void(0)><i class="layui-icon"></i></a>' +'<a href=javascript:void(0) title="点击修改课程基本信息" onclick="openUpdateLayer(this)"><i class="layui-icon"></i></a>' +'<a href=javascript:void(0) title="点击删除课程" onclick="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; }
返回数据格式:
