SSM分页解决方案-Bootstrap

SSM分页解决方案

一、mybatis分页插件--Mybatis-PageHelper
1.下载
   https://github.com/pagehelper/Mybatis-PageHelper
2.mybatis中最方便的分页插件，支持单表和多表分页查询。
3.要使用PageHelper，只需要在类路径中包含 pagehelper-xxx.jar 和jsqlparser-0.9.5.jar文件。xxx为最新版本号，到主页查询
4.maven项目的pom.xml中设置
   <dependency>
       <groupId>com.github.pagehelper</groupId>
       <artifactId>pagehelper</artifactId>
       <version>5.0.0</version>
   </dependency>
5.在mybatis的配置文件SqlMapConfig.xml中配置拦截器插件（在配置环境变量前添加）
   <plugins>
       <plugin interceptor="com.github.pagehelper.PageInterceptor">
           
           
           <property name="supportMethodsArguments" value="true"/>
       </plugin>
   </plugins>
6.在spring中配置(与spring集成时候配置，就不用配置第5步骤了)
   <bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
       <property name="plugins">
           <array>
               <bean class="com.github.pagehelper.PageInterceptor">
                   <property name="properties">
                       <value>
                           supportMethodsArguments=true
                       </value>
                   </property>
               </bean>
           </array>
       </property>
   </bean>
7.代码分页
   1）接口类中添加方法（对参数使用注解）
       List<Dept> pagedData(@Param("pageSize") int pageSize,@Param("pageNum") int pageNum);
   2）mapper类中
       <select id="pagedData" resultMap="BaseResultMap">
           select * from dept order by deptno
       </select>
   3）Service类中：
       public List<Dept> pagedData(int pageSize, int pageNum) {

           return deptService.pagedData(pageSize, pageNum);
       }
   4）控制器类中：
       public String getPagedData(@RequestParam(value="pageNum",defaultValue="1") int pageNum,Model model){
           int pageSize = 3;
           Page<Dept> page = (Page<Dept>)deptService.pagedData(pageSize, pageNum);

           model.addAttribute("page", page);

           return "dept/getpaged";
       }
   5）jsp中
       <table class="table table-hover">
           <c:forEach items="${ page }" var="dept">
               <tr>
                   <td>${ dept.deptno }</td>
                   <td>${ dept.dname }</td>
                   <td>${ dept.loc }</td>
               </tr>
           </c:forEach>
       </table>
二、bootstrap分页插件————Bootstrap Paginator
1.下载：
   https://github.com/lyonlai/bootstrap-paginator
2.Bootstrap Paginator是一个jQuery插件，简化了Bootstrap分页组件的渲染。它提供了自动更新分页状态的方法以及一些事件来通知组件中的状态更改。
3.bootstrap-paginator-master.zip中documentation中的index.html为帮助文件
4.在页面中导入css、js，如模板也中导入了一部分，可导入其他部分
   
   <link rel="stylesheet" href="css/bootstrap.min.css">
   
   <link rel="stylesheet" href="css/bootstrap-combined.min.css">
   
   <script type="text/javascript" src="js/jquery.min.js"></script>
   
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
   
   <script type="text/javascript" src="js/bootstrap-paginator.min.js"></script>
5.在控制器中添加分页所需数据
   @RequestMapping("/paged")
   public String getPagedData(@RequestParam(value="pageNum",defaultValue="1") int pageNum,Model model){
       int pageSize = 3;
       Page<Dept> page = (Page<Dept>)deptService.pagedData(pageSize, pageNum);

       model.addAttribute("page", page);//页面数据
       model.addAttribute("pageNum", page.getPageNum());//当前页号
       model.addAttribute("pages", page.getPages());//总共有多少页

       return "dept/getpaged";
   }
6.jsp中显示分页信息（同步使用分页插件的onpageclicked事件，异步使用分页插件的pageUrl属性实现）
   <div id="page"></div>
   <script type='text/javascript'>
var options = {
currentPage: ${ pageNum },
totalPages: ${pages},
numberOfPages:10,//最多显示页号的数量
pageUrl:function(type,page,current){
               //返回请求的url，非ajax时候使用
   return "${ pageContext.request.contextPath}/dept/paged.action?pageNum="+page;
},
itemTexts:function(type,page,current){
               //修改分页插件页面显示文字信息
   switch(type){
   case "first":
       return "第一页";
   case "prev":
       return "上一页";
   case "next":
       return "下一页";
   case "last":
       return "最后页";
   case "page":
       return page;
   }
}
}

$('#page').bootstrapPaginator(options);
</script>
7.ajax分页
   1）在控制器类中添加得到数据方法
       @RequestMapping("/paged_ajax")
       public @ResponseBody List<Dept> getPagedDataForAjax(@RequestParam(value="pageNum",defaultValue="1") int pageNum){
           int pageSize = 3;
           List<Dept> list = deptService.pagedData(pageSize, pageNum);

           return list;
       }
   2）修改jsp页，通过分页插件的onpageclicked事件，发出ajax请求，去掉原来的pageUrl属性
       <script type='text/javascript'>
var options = {
currentPage: ${ pageNum },
totalPages: ${pages},
numberOfPages:10,//最多显示页号的数量
onPageClicked:function(e,originalEvent,type,page){
   var url = "${ pageContext.request.contextPath }/dept/paged_ajax.action";
   var sendData = "pageNum="+page;
   $.get(url,sendData,function(data){
       $("#deptList").empty();
       $(data).each(function(){
           var tr = $("<tr>").appendTo("#deptList");
   $("<td>").text(this.deptno).appendTo(tr);
   $("<td>").text(this.dname).appendTo(tr);
   $("<td>").text(this.loc).appendTo(tr);
       });
   });
},
itemTexts:function(type,page,current){
   switch(type){
   case "first":
       return "第一页";
   case "prev":
       return "上一页";
   case "next":
       return "下一页";
   case "last":
       return "最后页";
   case "page":
       return page;
   }
}
}

源代码地址：https://download.csdn.net/download/pcbhyy/10761579

源码本目录结构说明：
1.lib为mybatis分页插件jar文件
2.ssm_page_demo为使用了mybatis分页插件和bootstrap分页控件的案例
1）默认使用了ajax得到分页数据
2）如需修改为同步分页数据，需要修改DeptController中getPagedData方法的返回值为"dept/getpaged"
3.bootstrap-paginator-master.zip为bootstrap分页插件的源码
4.SSM分页解决方案为综合案例的使用说明

SSM分页解决方案-Bootstrap

猜你喜欢