Front and rear ends is achieved using Mybatis paging data

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/qq_40646143/article/details/87733761

1. Create SqlMapConfig.xml in the spring configuration file

<?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, creates a page entity follows 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 interface class as follows

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

4, serviceImpl implementation classes are implemented as tab

	@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 follows

//@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, the front desk to use the pagination plugin

pagination.css
pagination.js

Maybe has a plug tab, to be noted that the document is introduced js <script src = "file path">, css file is introduced using <link rel = "stylesheet" href = "css Path">

Download link in the Baidu network disk: https://pan.baidu.com/s/1BOIGgqIcsuML3Tc6r14w2w extraction code: jajs 

 

7, the front end using the following specific html page

    //引用的 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 code

        <!--数据列表-->
			                  <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>
							 

 

The picture shows the final results