ssm框架实现多条件查询分页(模拟百度算法)

首先需求分析

1、 如果数据足够多那先默认先生成十页 否则就生成你的总页数这么多页

2、从点击7页码开始前面的页码要随之改变 后面也是

　　　　当当前页为7时第一个页码为2 最后一个页码为11可得

　　　　　　　　从当前页-5得到开始页(7-5=2) 末尾页等于当前页+4(7+4=11)

　　　　　　　　　　

 所以当前页大于6时就要生成“当前页-5”到 “当前页+4” 这么多个页码

　　再如果你总页数没有你当前页+4那么多 那点击下一页生成就会有问题

　　3、所以前面还要判断这个条件if(totalPage(总页数)<currentPage(当前页))如果当前条件成立的话则

　　　　生成总页数减9 到 到总页数这么多

需求分析完之后就是代码

首先我用的是分页的一个插件 pageHapler

具体代码（让你更详细的了解）:

 var htmls=""
            //如果当前页大于一 生成上一页和首页
            if(pageNum>1){
                htmls+="<input type=button value='首页' currentPage='1' onclick='page(this)'/>"
                htmls+="<input type=button value='上一页' currentPage='"+prePage+"' onclick='page(this)'/>"
            }
            //如果总页数没有十页
            if(pageTotal<10){
                for(var i=1;i<=pageTotal;i++){
                    ///给当前页按钮添加样式
                    if(pageNum==i){
                        htmls+="<input type='button' value='"+i+"'style='background-color:blue ' onclick='page(this)' currentPage='"+i+"' />"
                    }else {
                        htmls+="<input type='button' value='"+i+"' onclick='page(this)' currentPage='"+i+"'/>"
                    }
                }
            }
            else if(pageNum<=6){
                //如果当前页<=6
                for(var i=1;i<=10;i++){
                    ///给当前页按钮添加样式
                    if(pageNum==i){
                        htmls+="<input type='button' value='"+i+"'style='background-color:blue' onclick='page(this)' currentPage='"+i+"'/>"
                    }else {
                        htmls+="<input type='button' value='"+i+"' onclick='page(this)' currentPage='"+i+"'/>"
                    }
                }
             //其他
            }else{
                //如果总页数小于当前页+4
                if(pageTotal<=pageNum+4){
                    for(var i=pageTotal-9;i<=pageTotal;i++){
                        //给当前页按钮添加样式
                        if(pageNum==i){
                            htmls+="<input type='button' value='"+i+"' onclick='page(this)' style='background-color:blue' currentPage='"+i+"'/>"
                        }else {
                            htmls+="<input type='button' value='"+i+"' onclick='page(this)' currentPage='"+i+"'/>"
                        }
                    }
                //其他
                }else{
                    for(var i=pageNum-5;i<=pageNum+4;i++){
                        //给当前页按钮添加样式
                        if(pageNum==i){
                            htmls+="<input type='button' value='"+i+"'style='background-color:blue' onclick='page(this)' currentPage='"+i+"'/>"
                        }else {
                            htmls+="<input type='button' value='"+i+"' onclick='page(this)' currentPage='"+i+"'/>"
                        }
                    }
                }
            }
            //如果当前页小于总页数就生成下一页和尾页
            if(pageNum<pageTotal){
                htmls+="<input type=button value='下一页' onclick='page(this)' currentPage='"+nextPage+"'/>"
                htmls+="<input type=button value='尾页' onclick='page(this)' currentPage='"+pageTotal+"'/>"
            }
            $("#userPage").html(htmls)

　　

如何使用呢:

　　1、导入依赖

　　

 <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.10</version>
    </dependency>

　　2、配置文件(可以配置在spring和mybatis的一个整合xml文件中)

 3、编写mapper.xml

　　多条件查询所以要自己编写动态sql 也可以用逆向工程生成example类中的方法

<select id="getUserByCondition" resultMap="BaseResultMap">
    select * from user,role
    <where>
        user.userRole=role.id
      <if test="userName != null">
        and userName like CONCAT("%",#{userName},"%")
      </if>
      <if test="userRole!=0 and userRole!=null">
        and role.id=#{userRole}
      </if>
    </where>

4、service层

/**
     * 多条件分页查询
     * @param userName    用户名
     * @param userRole    用户角色
     * @param currentPage 当前页
     * @param pageSize    每页数据条数
     * @return
     */
    @Override
    public List<User> getUserByUserNameAndUserRole(String userName, Long userRole, Integer currentPage, Integer pageSize) {
        //pageHelper
        Page<User> page = PageHelper.startPage(currentPage, pageSize);
        List<User> users = userMapper.getUserByCondition(userName,userRole);
        //返回结果
        return users;
    }

　　4、contorller层

 /**
     * 获取所有用户并返回json格式字符串
     * @param userName 用户名
     * @param userRole 用户角色
     * @param session
     * @param currentPage 当前页
     * @return
     */
    @RequestMapping("getUserList")
    @ResponseBody
    public Object getUserList(String userName, Long userRole, HttpSession session, Integer currentPage, Model model) {
        Map<String, Object> map = new HashMap<String, Object>();
        //设置当前页
        Integer curPage=1;
        if (currentPage != null && currentPage != 0) {
            curPage = (int) currentPage;
        }
        List<User> userList = userService.getUserByUserNameAndUserRole(userName, userRole, curPage, Contents.PAGESIZE);
        PageInfo<User> userPage=new PageInfo<User>(userList);
        //获取角色列表
        List<Role> roles = roleService.getRoleList();
        //获取当前用户
        User user = (User) session.getAttribute(Contents.USER_SESSION);
        //放入map后通过json格式打印
        //当前用户
        map.put("user", user);
        //角色列表
        map.put("roleList", roles);
        map.put("userPage",userPage);
        //用户名(条件)
        map.put("userName", userName);
        //用户角色(条件)
        map.put("userRole", userRole);
        //返回结果
        return JSON.toJSONString(map);
    }

　　然后是js代码

$(function(){
    var datas= {}
    query(datas)
})

//查询
$("#query_btn").click(function () {
    var datas={"userName":$("#inputCity").val(),"userRole":$("#userRole").val()}
    query(datas)
})


function query(datas) {
    $.post(
        "/jsp/user/getUserList",
        datas,
        function (data) {
            var pageNum=data.userPage.pageNum;
            var pageTotal=data.userPage.pages;
            var prePage=data.userPage.prePage;
            var nextPage=data.userPage.nextPage;

            /*加载用户列表*/
            var htmls = "";
            for (var i = 0;i< data.userPage.list.length;i++) {
                var gender = ""
                if (data.userPage.list[i].gender == 1) {
                    gender = "男"
                } else {
                    gender = "女"
                }
                htmls += "<tr><td>" + data.userPage.list[i].userCode + "</td>";
                htmls += "<td>" + data.userPage.list[i].userName + "</td>";
                htmls += "<td>" + gender + "</td>";
                htmls += "<td>" + data.userPage.list[i].age + "</td>";
                htmls += "<td>" + data.userPage.list[i].phone + "</td>";
                htmls += "<td>" + data.userPage.list[i].userRoleName + "</td>";
                htmls += "<td><input type=button value=查看 onclick='getUserById("+data.userPage.list[i].id +")'/></td>"
                htmls += "<td><input type=button value=修改 onclick='updUserById("+data.userPage.list[i].id +")'/></td>"
                htmls += "<td><input type=button value=删除 onclick='delUser(this,"+data.userPage.list[i].id +")'/></td></tr>"
            }
            $("#tbody").html(htmls)
            /**
             * 加载角色列表
             */
            var htmls = "<option value=0>选择角色</option>";
            for (var i = 0; i < data.roleList.length; i++) {
                htmls += "<option value=" + data.roleList[i].id + ">" + data.roleList[i].roleName + "</option>"
            }

            $("#userRole").html(htmls)
            /*获取当前用户*/
            $("#user").html(data.user.userName)
            //反显用户角色
            var userRoleList = $("#userRole").children()
            for (var i = 0; i < userRoleList.length; i++) {
                if (userRoleList[i].value == data.userRole) {
                    userRoleList[i].selected = "selected";
                }
            }

            var htmls=""
            //如果当前页大于一 生成上一页和首页
            if(pageNum>1){
                htmls+="<input type=button value='首页' currentPage='1' onclick='page(this)'/>"
                htmls+="<input type=button value='上一页' currentPage='"+prePage+"' onclick='page(this)'/>"
            }
            //如果总页数没有十页
            if(pageTotal<10){
                for(var i=1;i<=pageTotal;i++){
                    ///给当前页按钮添加样式
                    if(pageNum==i){
                        htmls+="<input type='button' value='"+i+"'style='background-color:blue ' onclick='page(this)' currentPage='"+i+"' />"
                    }else {
                        htmls+="<input type='button' value='"+i+"' onclick='page(this)' currentPage='"+i+"'/>"
                    }
                }
            }
            else if(pageNum<=6){
                //如果当前页<=6
                for(var i=1;i<=10;i++){
                    ///给当前页按钮添加样式
                    if(pageNum==i){
                        htmls+="<input type='button' value='"+i+"'style='background-color:blue' onclick='page(this)' currentPage='"+i+"'/>"
                    }else {
                        htmls+="<input type='button' value='"+i+"' onclick='page(this)' currentPage='"+i+"'/>"
                    }
                }
             //其他
            }else{
                //如果总页数小于当前页+4
                if(pageTotal<=pageNum+4){
                    for(var i=pageTotal-9;i<=pageTotal;i++){
                        //给当前页按钮添加样式
                        if(pageNum==i){
                            htmls+="<input type='button' value='"+i+"' onclick='page(this)' style='background-color:blue' currentPage='"+i+"'/>"
                        }else {
                            htmls+="<input type='button' value='"+i+"' onclick='page(this)' currentPage='"+i+"'/>"
                        }
                    }
                //其他
                }else{
                    for(var i=pageNum-5;i<=pageNum+4;i++){
                        //给当前页按钮添加样式
                        if(pageNum==i){
                            htmls+="<input type='button' value='"+i+"'style='background-color:blue' onclick='page(this)' currentPage='"+i+"'/>"
                        }else {
                            htmls+="<input type='button' value='"+i+"' onclick='page(this)' currentPage='"+i+"'/>"
                        }
                    }
                }
            }
            //如果当前页小于总页数就生成下一页和尾页
            if(pageNum<pageTotal){
                htmls+="<input type=button value='下一页' onclick='page(this)' currentPage='"+nextPage+"'/>"
                htmls+="<input type=button value='尾页' onclick='page(this)' currentPage='"+pageTotal+"'/>"
            }
            $("#userPage").html(htmls)
        }, "json"
    )
}
//分页查询
function page(ts){
    var curPage=$(ts).attr('currentPage')
    datas={"currentPage":curPage,"userName":$("#inputCity").val(),"userRole":$("#userRole").val()}
    query(datas)
}

　记得之前项目答辩我最不会的就是分页 经过一段时间的学习我还是学会了分页一开始是自己写page的工具类

大致了解了分页的原理 随后使用pageHepler大大的减轻了我们的编码量 这是我课堂的一次作业 然后分享给大家

如果喜欢呢 可以点个关注 持续更新哦~