总体思路：
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;
}
返回数据格式: