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

最新推荐文章于 2022-09-22 10:15:50 发布

weixin_33951761

最新推荐文章于 2022-09-22 10:15:50 发布

阅读量560

点赞数

文章标签： javascript java json ViewUI

　　总体思路：

　　　　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">&#xe615;</i></button>
            <button class="layui-btn layui-btn-normal" type="button" onclick='clearQueryCondition(this)' title="点击重置查询条件"><i class="layui-icon">&#xe639;</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">&#xe615;</i></a>'
            +'<a href=javascript:void(0) title="点击修改课程基本信息" οnclick="openUpdateLayer(this)"><i class="layui-icon">&#xe642;</i></a>'
            +'<a href=javascript:void(0) title="点击删除课程" οnclick="deleteCourseByCourseId(this)"><i class="layui-icon">&#xe640;</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;
    }

返回数据格式: