图书管理系统——读者管理（查询功能）

1、读者查询

1.1点击‘读者管理’跳转界面

1.2在Controller创建readerIndex

ReaderController.java

/**
     * 查询菜单的映射
     */
    @GetMapping("/readerIndex")
    public String readerIndex(){
        return "reader/readerIndex";
    }

1.3读者主页设计

readexIndex.jsp

 cols: [[
                {type: "checkbox", width: 50},
                // {field: 'id', width: 110, title: 'ID', sort: true},
                {field: 'username', width: 100, title: '用户名'},
                {field: 'name', width: 100, title: '真实姓名'},
                {field: 'sex', width: 100, title: '性别'},
                {field: 'number', width: 100, title: '可借数量'},
                {templet:"<div>{{layui.util.toDateString(d.creatDate,'yyyy-MM-dd HH:mm:ss')}}</div>", width: 220, title: '办卡时间'},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],

1.4请求Controller查询读者信息

ReaderController.java

/**
     * 查询所有的读者信息
     */
    @ResponseBody
    @RequestMapping("/queryReaderAll")
    public R queryReaderAll(ReaderCard info, @RequestParam(defaultValue = "1") Integer page,
                            @RequestParam(defaultValue = "15") Integer limit){

        PageInfo<ReaderCard>  pageInfo=readerService.queryReaderAll(info,page,limit);
        return R.ok("成功",pageInfo.getTotal(),pageInfo.getList());
    }

1.5界面

2高级查询

readerIndex.jsp

 <div class="layuimini-main">
            <div class="demoTable">
                <div class="layui-form-item layui-form ">
                    卡号
                    <div class="layui-inline">
                        <input class="layui-input" name="cardNumber" id="cardNumber" autocomplete="off">
                    </div>

                    用户名
                    <div class="layui-inline">
                        <input class="layui-input" name="uesrname" id="uesrname" autocomplete="off">
                    </div>

                    电话
                    <div class="layui-inline">
                        <input class="layui-input" name="tel" id="tel" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">高级查询</button>
                    <%--<button class="layui-btn" lay-submit data-type="reload"  lay-filter="queryBook">高级查询</button>--%>
                </div>
            </div>
        </div>

2.2获取高级条件值，进行重载table

readerIndex.jsp

 var $ = layui.$, active = {
            reload: function(){
                var cardNumber = $('#cardNumber').val();
                var username= $('#username').val();
                var tel= $('#tel').val();
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        cardNumber:cardNumber,
                        username:username,
                        tel:tel
                    }
                }, 'data');
            }
        };