总体思路：
1.前台查询的时候将当前页和页大小传到后台
2.后台将当前页，页大小以及数据与数据总数返回前台，前台显示完表格完数据之后显示分页插件。
前台页面:
准备查询条件的表单，与数据表格,分页div (同时需要在查询条件表单中准备隐藏当前页与页大小的文本框)
<%--查询条件的form--%>
| 序号 | 培养方案名称 | 专业名称 | 专业代码 | 学科门类 | 专业负责人 | 修业年限 | 修订人 | 修订时间 | 状态 | 操作 |
|---|
效果:
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 ' +''+index+'' +''+replaceNull(trainschemes[i].trainingSchemaName)+'' +''+replaceNull(trainschemes[i].majorName)+'' +''+replaceNull(trainschemes[i].majorID)+'' +''+replaceNull(trainschemes[i].majorType)+'' +''+replaceNull(trainschemes[i].majorManager)+'' +''+replaceNull(trainschemes[i].trainYears)+'' +''+replaceNull(trainschemes[i].revisePerson)+'' +''+replaceNull(trainschemes[i].createTime)+'' +''+replaceNull(trainschemes[i].remark1)+'' +'' +' ' +' ' +' ' +'' $("#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
返回数据格式:
