分页是我们经常会碰到的需求之一，今天我们就使用企业中很常用的mybatis分页插件pageHelper来给大家做一个ssm整合bootstrap分页的案例

先看效果图:

图片.png

一：建立数据库student:

学生表student

图片.png

年级表grade：

图片.png

二：创建web项目：myStudent搭建起ssm框架:

图片.png

三：将分页插件pageHelper jar包拷贝到lib文件夹下

图片.png

四：在mybatis配置文件sqlMapConfig.xml中配置分页插件：

<plugins>

        <plugin interceptor="com.github.pagehelper.PageHelper">

            <!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库-->       

            <property name="dialect" value="mysql"/>

        </plugin>

 </plugins>

 

@Controller

public class studentCont

五：编写控制器的方法：

@Controller

public class studentController {

    @Autowired

    private studentService StudentService;

    @RequestMapping("/Index")

    public String Index(@RequestParam(value="pn",defaultValue="1") int pn,Model model)

    {

       

// 在查询之前需要调用，传入当前第几页，以及每页多少条记录

        PageHelper.startPage(pn,3);

        List<student> lstStudent = StudentService.findAllStudent();

        // 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。

        // 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数

        PageInfo<student> page = new PageInfo<student>(lstStudent,3);

        model.addAttribute("pageInfo", page);

        return "Index"; }

}

 

这里的参数pn表示当前第几页，默认值defaultValue为1

PageHelper.startPage(pn,3);这行代码在分页查询之前调用第一个参数pn表示当前第几页，第二个参数3表示每页显示3条记录

PageInfo<student> page = new PageInfo<student>(lstStudent,3);

这行代码将查询出的所有学生记录封装到PageInfo中,第一个参数表示查询出的所有学生，第二个参数表示连续显示的页码数。

将page传到页面。

 

 

六：编写jsp页面

（1）    引入bootstrap文件

<head>

  <%pageContext.setAttribute("App_PATH", request.getContextPath()); %> 

   

    <link

    href="${App_PATH}/bootstrap/css/bootstrap.min.css"

    rel="stylesheet">

     <script type="text/javascript" src="${App_PATH}/staitc/jquery-1.4.4.min.js"></script>

   <script type="text/javascript" src ="${App_PATH }/staitc/js/bootstrap.min.js"></script>

  </head>

 

 

   (2) 使用bootstrap搭建布局：

<div class="container">

     <div class="row">

        <div class="col-md-12">

        <h1>ssm-crud</h1>

        </div>

     </div>

     <div class="row">

        <div class="col-md-4 col-md-offset-8">

        <button class="btn btn-primary" >新增</button>

        <button class="btn btn-danger">删除</button>

        </div>

     </div>

   

   

     <div class="row">

        <div class="col-md-12">

        <table class="table table-hover">

            <tr>

            <th>#</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>年级</th>

            <th>操作</th>

            </tr>

           

            <c:forEach items="${pageInfo.list }" var="stu">

             <tr>

              <th>${stu.sid }</th>

             <th>${stu.sname }</th>

             <th>${stu.age }</th>

             <th>${stu.grade.gname }</th>

             <th>

                <button class="btn btn-primary btn-sm">

                    <span class="glyphicon glyphicon-pencil"></span>编辑

                </button>

                <button class="btn btn-danger btn-sm">

                    <span class="glyphicon glyphicon-trash"></span>删除

                </button>

            </th>

             

             </tr>

            </c:forEach>

        </table>

     </div>

 

 

 

  （3）显示分页信息和分页导航：

    

     <div class="row">

        <div class="col-md-6">当前${pageInfo.pageNum }页,总${pageInfo.pages }页，总${pageInfo.total }条记录</div>

        <div class="col-md-6">

            <ul class="pagination">

            <li><a href="${App_PATH}/Index?pn=1">首页</a></li>

            <!--如果有前一页则加上前一页的超链接  -->

            <c:if test="${pageInfo.hasPreviousPage }">

                <li><a href="${APP_PATH }/Index?pn=${pageInfo.pageNum-1}"

                            aria-label="Previous"> <span aria-hidden="true">&laquo;</span>

                        </a></li>

            </c:if>

            <!--循环遍历所有页码并显示 -->

            <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">

                <c:if test="${page_Num==pageInfo.pageNum }">

                    <li class="active"><a href="#">${page_Num}</a></li>

                </c:if>

               

                <c:if test="${page_Num!=pageInfo.pageNum }">

                    <li><a href="${App_PATH}/Index?pn=${page_Num}">${page_Num}</a></li>

                </c:if>

               

               

            </c:forEach>

            <!--如果有下一页则显示下一页的超级链接 -->

            <c:if test="${pageInfo.hasNextPage }">

           

                <li><a href="${App_PATH}/Index?pn=${pageInfo.pageNum+1}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>

            </c:if>

            <li><a href="${App_PATH}/Index?pn=${pageInfo.pages}">末页</a></li>

            </ul>

        </div>

     </div>

     </div>   

 

如果需要源代码请加微信   350293616 领取