mybatis分页插件使用案例（前端bootstrap）

最新推荐文章于 2024-06-10 18:54:37 发布

竖心旁的情

最新推荐文章于 2024-06-10 18:54:37 发布

阅读量5.1k

点赞数 4

分类专栏： java-web 文章标签： bootstrap分 mybatis分页 ajax分页

本文链接：https://blog.csdn.net/wu_0916/article/details/74389746

版权

java-web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.原因
看了http://blog.csdn.net/u012728960/article/details/50791343这篇文章感觉mybatis分页插件很有用，就转子了，就自己也写了个demo方便日后查看。
2.效果图
这里写图片描述
3.maven引入和spring配置
maven

       <!-- pagehelpers -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>
        <dependency>
            <groupId>com.github.jsqlparser</groupId>
            <artifactId>jsqlparser</artifactId>
            <version>0.9.6</version>
        </dependency>

spring

    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">  
        <property name="dataSource" ref="dataSource" />  
        <property name="configLocation" value="classpath:spring-mybatis.xml" />  
        <property name="mapperLocations" value="classpath:/com/xie/test/dao/*.xml" />

        <!-- 分页插件配置 -->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageHelper">
                    <property name="properties">
                        <value>
                            dialect=mysql
                        </value>
                    </property>
                </bean>
            </array>
        </property> 
    </bean>

4.controller

package com.xie.test.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.alibaba.fastjson.JSON;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xie.test.service.UserService;
import com.xie.test.vo.User;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    public UserService userService;

    @RequestMapping(value="/getUserList")
    public ModelAndView getUserList(ModelAndView modelAndView,int pageNum){
        int pageSize=2;

        PageHelper.startPage(pageNum, pageSize);//当前页，页面大小
        //紧跟着的第一个select方法会被分页 
        List<User> listUser=userService.getUser();

        PageInfo<User> pageInfo=new PageInfo<User>(listUser);
        modelAndView.addObject("listUser", listUser);
        modelAndView.addObject("pageInfo", pageInfo);
        modelAndView.setViewName("showUser");
        return modelAndView;
    }
}

5.service

package com.xie.test.ServiceImpl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.xie.test.dao.IUserDao;
import com.xie.test.service.UserService;
import com.xie.test.vo.User;

@Service
public class UserServcieImpl implements UserService{

    @Autowired
    public IUserDao userDao;

    public List<User> getUser() {
        List<User> user=userDao.queryUser();
        return user;
    }
}

6.dao及mapper
dao

package com.xie.test.dao;

import java.util.List;

import com.xie.test.vo.User;
public interface IUserDao {

    /**
     * 查询全部人员
     * @return
     */
    List<User> queryUser();
}

mapper

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">  
<mapper namespace="com.xie.test.dao.IUserDao">  
    <select id="queryUser" parameterType="com.xie.test.vo.User" resultType="com.xie.test.vo.User">  
       select t.id as id,  
       t.name as name,  
       t.age as age,
       t.grade as grade 
       from  
       user t
   </select>  
 </mapper>

7.view（显示酷炫是因为用了bootstrap）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>showUser</title>

</head>
<%
    pageContext.setAttribute("path", request.getContextPath());
%>
<link rel="stylesheet"
    href="${path }/bootstrap/css/bootstrap.min.css">
<script type="text/javascript"
    src="${path }/bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
    src="${path }/bootstrap/js/bootstrap.min.js"></script>
<body>

<div class="cntainer">
    <div class="row">
        <div class="col-md-12">
            <h1>人员列表</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-honver">
                <tr>
                    <th>id</th>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>级别</th>
                </tr>
                <c:forEach items="${listUser}" var="emp">
                <tr>
                    <td>${emp.id }</td>
                    <td>${emp.name }</td>
                    <td>${emp.age }</td>
                    <td>${emp.grade }</td>
                    <td><button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-pencil"></span>增加</button></td>
                    <td><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-trash"></span>删除</button></td>
                </tr>
            </c:forEach>
            </table>
        </div>
    </div>

    <!-- 分页 -->
    <div class="row">
        <div class="col-md-6">
                  当前${pageInfo.pageNum }页，总共${pageInfo.pages }页，总共${pageInfo.total }条记录
        </div>
        <div class="col-md-6">
            <nav aria-lable="Page navigation">
                <ul class="pagination">

                    <li><a href="${path }/user/getUserList.do?pageNum=1">首页</a></li>

                    <c:if test="${pageInfo.hasPreviousPage  }">
                        <li>
                            <a href="${path }/user/getUserList.do?pageNum=${pageInfo.pageNum-1}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>

                    <c:forEach items="${pageInfo.navigatepageNums  }" var="page">
                        <c:if test="${page==pageInfo.pageNum }">
                            <li class="active"><a href="${path }/user/getUserList.do?pageNum=${page}">${page}</a></li>
                        </c:if>
                        <c:if test="${page!=pageInfo.pageNum }">
                            <li><a href="${path }/user/getUserList.do?pageNum=${page}">${page}</a></li>
                        </c:if>
                    </c:forEach>

                    <c:if test="${pageInfo.hasNextPage }">
                        <li>
                            <a href="${path }/user/getUserList.do?pageNum=${pageInfo.pageNum+1 }" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </c:if>

                    <li><a href="${path }/user/getUserList.do?pageNum=${pageInfo.pages}">末页</a></li>

                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>

8.ajax+分页
onclick中的ajaxMethod方法即为调用ajax方法

//分页测试
    function showPage(valueA,valueB){
        var str=""
        str+="<div class='row'>"+
            "<div class='col-md-6'>"+
                    "  当前"+pageInfo.pageNum +"页，总共"+pageInfo.pages +"页，总共"+pageInfo.total+"条记录"+
            "</div>"+
            "<div class='col-md-6'>"+
                "<nav aria-lable='Page navigation'>"+
                    "<ul class='pagination'>"+

                        "<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+1+")'>首页</a></li>";

                        if(pageInfo.hasPreviousPage){
                            str+="<li>"+
                                "<a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+(pageInfo.pageNum-1)+")' aria-label='Previous'>"+
                                "<span aria-hidden='true'>&laquo;</span>"+
                                "</a>"+
                            "</li>";
                        }
                        for(var i=1;i<=pageInfo.navigatepageNums.length;i++){
                            if(i==pageInfo.pageNum){
                                str+="<li class='active'><a onclick='ajaxMethod("+valueA+","+valueB+","+i+")'>"+i+"</a></li>";
                        }
                            if(i!=pageInfo.pageNum){
                                str+="<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+i+")'>"+i+"</a></li>";
                            }
                        }

                        if(pageInfo.hasNextPage){
                            str+="<li>"+
                                "<a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+(pageInfo.pageNum+1)+")' aria-label='Next'>"+
                                   " <span aria-hidden='true'>&raquo;</span>"+
                                "</a></li>";

                        }

                        str+="<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+pageInfo.pages+")'>末页</a></li>"+
                    "</ul></nav></div></div>";
                    $("#xie").html(str);
    }