利用Mybatis来实现前后端数据的分页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40646143/article/details/87733761

1, 在spring的配置文件创建 SqlMapConfig.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<plugins>
		<!-- com.github.pagehelper 为 PageHelper 类所在包名 -->
		<!--分页插件 -->
		<plugin interceptor="com.github.pagehelper.PageHelper">
			<!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->
			<property name="dialect" value="mysql"/>
		</plugin>
	</plugins>
</configuration>

2, 创建分页实体如下 pageResult.java

public class PageResult implements Serializable{
	private long total; 
	private List date;

	public PageResult(long total, List date) {
		super();
		this.total = total;
		this.date = date;
	}

    getset...	

}

3,service接口类如下

    //分页查询数据
	public PageResult finPage(int pageNum,int pageSize);

4,serviceImpl实现类实现分页如下

	@Override
	public PageResult finPage(int pageNum,int pageSize) {
		//pageNum 当前第几页
		//pageSize 每页几条数据
		PageHelper.startPage(pageNum, pageSize);
		//转换page类型
		Page<TbBrand> page = (Page<TbBrand>) tbBranch.selectByExample(null);
		return new PageResult(page.getTotal(),page.getResult());
	}

5,controller如下

//@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用
@RestController
@RequestMapping("/branch")
class BranchController {
	
	@Reference
	private BranchService branchService;
	
	
	@RequestMapping("/findPage")
	public PageResult findPage(int page,int size){
		 return branchService.finPage(page, size);
	}
}

6,前台用到了分页插件

pagination.css
pagination.js

这俩个是分页插件,需要注意的是js文件的引入是用<script src="文件路径"> ,而css文件的引入是使用<link rel="stylesheet" href="css路径">

在百度网盘进行下载 链接: https://pan.baidu.com/s/1BOIGgqIcsuML3Tc6r14w2w 提取码: jajs 

7,在前端html 页面具体使用如下

    //引用的 js 与 css 文件
	<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
	<!-- 引用分页插件-->
	<script src="../plugins/angularjs/pagination.js"></script>
	<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

     	
      <script type="text/javascript">
    var ng=angular.module('pinyougou',['pagination']);
    ng.controller('myController',function($scope,$http){
    	//查询品牌列表
    	$scope.findAll=function(){
    		$http.get('../branch/findAll.do').success(
    			function(response){
    			//响应返回结果集
    			$scope.list=response;
    		}
    	  );
    	}
 	
 		//currentPage --当前页数
 		//totalItems -- 分页数据总长度
 		//itemsPerPage -- 每页数据的长度
    	$scope.pageResultConf={
    			currentPage:1,
    			totalItems:10,
    			itemsPerPage:10,
    			perPageOpeions:[10,20,30,40,50],
    			onChange:function(){
    				$scope.loadList();
    			}
    	
    	}
    	
    		
    	$scope.loadList=function(){
    		$scope.findPage($scope.pageResultConf.currentPage,$scope.pageResultConf.itemsPerPage);
    	}
    
    	$scope.findPage=function(page,size){
    		$http.get('../branch/findPage.do?page='+page+'&size='+size).success(
    			function(response){
    				$scope.list=response.date;//显示当前页数据
    				$scope.pageResultConf.totalItems=response.total;//显示总数据条数
    			}		
    		);
    	}
    	
    });
    
    
    </script>

body代码为

        <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">品牌ID</th>
									      <th class="sorting">品牌名称</th>									      
									      <th class="sorting">品牌首字母</th>									     				
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody>
			                          <tr ng-repeat="entiy in list">
			                              <td><input  type="checkbox" ></td>			                              
				                          <td>{{entiy.id}}</td>
									      <td>{{entiy.name}}</td>									     
		                                  <td>{{entiy.firstChar}}</td>		                                 
		                                  <td class="text-center">                                           
		                                 	  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button>                                           
		                                  </td>
			                          </tr>
			                      </tbody>
			                  </table>
			                  <!--数据列表/-->                        
							  <tm-pagination conf="pageResultConf"></tm-pagination>
							 

最终效果图为