SpringBoot+Layui+Thymeleaf表格分页+查询

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传并刻录记录</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body style="padding: 10px">
<fieldset class="layui-elem-field">
    <legend>查询</legend>
    <div class="layui-field-box">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">任务名称</label>
                    <div class="layui-input-inline">
                        <input type="input" name="stName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">上传类型</label>
                    <div class="layui-input-inline">
                        <select name="stBurnMode">
                            <option value="99" selected>全部</option>
                            <option value="1">文件</option>
                            <option value="2">文件夹</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="formInfo">查询</button>
            </div>
        </form>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>任务记录</legend>
</fieldset>
<table class="layui-hide" id="burnLog"></table>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../layui/layui.all.js"></script>
<script>
    layui.use(['layer','element','form','table','jquery'], function(){
        var table = layui.table
            ,form = layui.form
            ,wheredata = null;//wheredata查询条件   关键   点击查询时赋值并刷新表格  不跳转   

        table.render({
            elem: '#burnLog'
            ,url:'/taskNotes/queryUploadBurnLog'
            ,where:wheredata
            ,method:'post'
            ,id:"burnDataLog"
            ,cols: [
                [
                {field:'stName', title: '任务名称'}
                ,{field:'stStatusStr', title: '任务状态'}
                ,{field:'stMsg', title: '任务提示'}
                ,{field:'stTimeStart', title: '开始时间'}
                ,{field:'stTimeStop', title: '结束时间'}
                ]
            ]
            ,page: true
        });
        /** 提交查询数据 */
        form.on('submit(formInfo)',function (data) {
            wheredata = data.field;//当前容器的全部表单字段,名值对形式:{name: value}
            table.reload("burnDataLog",{
                where:wheredata
            })
            return false;
        })
    });
</script>
</body>
</html>

 

Controller控制层

    /**
     * 查看上传并刻录的任务
     * @param page 页码
     * @param limit 每页的数据条数
     * @param stBurnMode 文件模式
     * @param stName 任务名称
     * @return 数据json
     */
    @RequestMapping(value = "/queryUploadBurnLog", method = {RequestMethod.POST})
    @ResponseBody
    public String queryUploadBurnLog(Integer page,Integer limit,Integer stBurnMode,String stName){
        SubTask subTask = new SubTask();
        //判断模式是否为空
        if(stBurnMode!=null){
            subTask.setStBurnMode(stBurnMode);
        }else{
            subTask.setStBurnMode(99);
        }
        //设置参数
        subTask.setPage(page);
        subTask.setLimit(limit);
        subTask.setStName(stName);

        PageInfo<SubTask> subTaskPageInfo = subTaskService.queryAllSubTask(subTask);

        Map<String,Object> map = new HashMap<>();
        map.put("code","0");
        map.put("msg","");
        map.put("count",subTaskPageInfo.getTotal());
        map.put("data",subTaskPageInfo.getList());

        return JSON.toJSONString(map);
    }

 

版权声明:
作者:黯然gg
链接:https://3zi.cn/archives/290
来源:阿龙爱吃肉
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录