BootGrid分页模糊查询插件

bootGrid分页查询插件
今天给大家推荐一款基于Juqery+bootStrap的好用的分页插件，叫bootGrid，它能自动进行各个列名进行模糊查询，且能够自动进行根据列名排序，是不是很nice；
bootGrid官网
界面如下图所示：
BootGrid分页模糊查询插件
接下来做一个简单Demo实现：
1.首先在首页index.jsp添加一个table，并写出相应的列头

<table id="grid-data" class="table table-condensed table-hover table-striped">
                <thead>
                <tr>
                    <th data-column-id="stuId"  align="center" data-type="numeric">stuId</th>
                    <th data-column-id="stuName"  align="center">stuName</th>
                    <th data-column-id="stuAge" align="center">stuAge</th>
                    <th data-column-id="stuMajor"  align="center">stuMajor</th>
                    <th data-column-id="commands" data-formatter="commands" align="center" data-sortable="false">Commands</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

2.通过官网请求说明我们可以看出他是基于Ajax异步刷新的，所以接下来编写js脚本

<script>
    $(document).ready(function () {
        var grid = $("#grid-data").bootgrid({
            ajax: true,
            url: "/stu/stuList",
            formatters: {
                "commands": function (column, row) {
                    return "<button type=\"button\" class=\"btn btn-info btn-xs command-edit\" data-row-id=\"" + row.stuId + "\">编辑<span class=\"fa fa-pencil\"></span></button> " +
                        "<button type=\"button\" class=\"btn btn-danger btn-xs command-delete\" data-row-id=\"" + row.stuId + "\">删除<span class=\"fa fa-trash-o\"></span></button>";
                }
            }
        }).on("loaded.rs.jquery.bootgrid", function (e) {
            grid.find(".command-edit").on("click", function (e) {
                $(".stumodal").modal();
                $.post("/stu/getStuInfo", {stuId: $(this).data("row-id")}, function (str) {
                    $("#stuId2").val(str.stuId);
                    $("#stuName2").val(str.stuName);
                    $("#stuAge2").val(str.stuAge);
                    $("#stuMajor2").val(str.stuMajor);
                });
            }).end().find(".command-delete").on("click", function (e) {
                //alert("You pressed delete on row: " + $(this).data("row-id"));
                var r = confirm("你确定要删除编号为 " + $(this).data("row-id") + " 的学生信息吗?");
                if (r) {
                    $.post("/stu/delStu", {stuId: $(this).data("row-id")}, function (str) {
                        if (str > 0) {
                            alert("删除成功");
                            $("#grid-data").bootgrid("reload");
                        } else {
                            alert("删除失败");
                            $("#grid-data").bootgrid("reload");
                        }
                    });
                }
            });
        });
    });

这里我是通过SpringMvc来调用的web控制层；接下来我通过业务逻辑层进行分页时，发现我的模糊查询，以及排序根本不起作用?
下面我们来看一下官网的请求参数：
BootGrid分页模糊查询插件
current=当前页&rowCount=分页大小&sort[列名]=asc&searchPhrase=“搜索内容”&id=b0df282a-0d67-40e5-8558-c9e93b7befed
这几个参数，因为刚开始我在前端控制层没有传递这几个参数，且我的数据库sql语句也没有加条件，所以发生了以上的情况？
3.前端控制层

/**
     * 查找所有学生信息
     * @param current
     * @param rowCount
     * @param searchValue
     * @return
     */
    @RequestMapping(value = "/stuList",produces = {"application/json;charset=UTF-8"})
    @ResponseBody
    public String getStuList(@RequestParam("current") int current,@RequestParam("rowCount") int rowCount,
                             @RequestParam("searchPhrase") String searchValue) {
        String sort="";         //排序
        String sortId = request.getParameter("sort[stuId]");
        String sortName = request.getParameter("sort[stuName]");
        String sortAge = request.getParameter("sort[stuAge]");
        if(!StringUtils.isEmpty(sortId)){
            sort=" order by stuId "+sortId;
        }
        if(!StringUtils.isEmpty(sortName)){
            sort=" order by stuName "+sortName;
        }
        if(!StringUtils.isEmpty(sortAge)){
            sort=" order by stuAge "+sortAge;
        }
        //创建学生查询对象
        StuGrid stuGrid = new StuGrid();
        //获取所有学生
        if(rowCount<0){
            stuGrid.setRows(stuService.getAllStu(searchValue,sort));
            return JSON.toJSONString(stuGrid);
        }
        int total = stuService.getStuNum(searchValue,sort);//获取总记录
        //根据条件查询出相关的学生集合
        List<Stu>  list = stuService.getPageStu(current,rowCount,searchValue,sort);
        stuGrid.setCurrent(current);
        stuGrid.setRowCount(rowCount);
        stuGrid.setRows(list);
        stuGrid.setTotal(total);
        String json = JSON.toJSONString(stuGrid);
        System.out.println(json);
        return json;
    }

4.这边业务逻辑层我就不展示了，直接上dao层，我这里是用的Mybatis，直接上sql语句写法；

<select id="getStuList" parameterType="java.lang.String" resultMap="stuMap">
          select * from stu
          <where>
              <if test="searchValue != null and searchValue != ''">
                  stuName like CONCAT(CONCAT('%', #{searchValue}), '%') or stuMajor like CONCAT(CONCAT('%', #{searchValue}), '%')
              </if>
          </where>
          <if test="sort != null and sort != ''">
            ${sort}
          </if>
    </select>

在用Mybatis链接字符时，用了concat函数，其中#{} 与’ ${}’ 区别是#{}带有引号，${}则显示参数不加引号；
好了，接下来我们所有的操作都能够实现了！

BootGrid分页模糊查询插件

相关推荐