1. 程式人生 > >Mybatis分頁Pagehelper以及前端外掛結合使用完整版

Mybatis分頁Pagehelper以及前端外掛結合使用完整版

前端效果圖:
在這裡插入圖片描述

後臺部分

maven依賴:
基於mybatis

<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.3.2</version>
		</dependency>
        <dependency>
		 	<groupId>com.github.pagehelper</groupId>
		 	<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
		 	<version>1.2.3</version>
		</dependency>
		<dependency>
		 	<groupId>com.github.pagehelper</groupId>
		 	<artifactId>pagehelper-spring-boot-starter</artifactId>
		 	<version>1.2.3</version>
		</dependency>

service程式碼:
Role為角色實體類

 PageInfo<Role> selectRoleList(Integer pageNum, Integer pageSize,Role role);
``


serviceimpl實現類:

注意:下面的方法不寫在controller裡面

	@Override
	public PageInfo<Role> selectRoleList(Integer pageNum, Integer pageSize, Role role) {
		PageHelper.startPage(pageNum, pageSize);
		List<Role> list = roleMapper.selectRoleListByName(role);
		PageInfo<Role> pageInfo = new PageInfo<>(list);
		return pageInfo;
	}

controller:

@GetMapping("index")
	public String adminIndex(Role record,Model model,
			@RequestParam(required=true,value="pageNum",defaultValue="1") Integer pageNum,
			@RequestParam(required=true,value="pageSize",defaultValue="15") Integer pageSize
			){
		 
		      PageInfo<Role> pageInfo = roleService.selectRoleList(pageNum, pageSize, record);
		      model.addAttribute("rolename", record.getRolename());
			  model.addAttribute("pageInfo", pageInfo);	
		      return "admin/role/setup";
	}
	

前端部分:

在後端 引數部分defaultValue="15"預設每頁顯示15條,若沒有15條資料不顯示分頁;根據情況自己修改測試。

需要的js,css:

jquery.pagination.css
jquery.pagination.min.js

外掛下載:
https://download.csdn.net/download/qq_22860341/10694937
或者去網上自行尋找資源下載

示例:

<link rel="stylesheet" th:href="@{/api/css/jquery.pagination.css}">
<script th:src="@{/api/js/jquery.pagination.min.js}"></script>

html程式碼:

<table class="table  table-striped" border="1" cellspacing="0" cellpadding="0">
				<tr>
					<td><input type="checkbox" name="" id="checkall" value="" /></td>
					<td>序號</td>
					<td>角色</td>
					<td>建立時間</td>
				</tr>
				<tr th:each="a,aStat:${pageInfo.list}">
					<td><input type="checkbox" name="childcheck" th:id="${a.id}" th:value="${a.id}" /></td>
					<td th:text="${aStat.count}">1</td>
					<td th:text="${a.rolename}">超級管理員</td>
					<td th:text="${#strings.substring(a.createtime,0,19)}">2018.05.07 15:30</td>
				</tr>
			</table>
			
		<div class="box">
	       <div id="pagination" class="page center">
	     </div>

最後這個分頁程式碼一定加:

    	<div class="box">
	        <div id="pagination" class="page center">
	   </div>

js程式碼:

     <script>
	       var pageNum = [[${pageInfo.pageNum}]];
	      var pages = [[${pageInfo.pages}]];
	      var pageSize = [[${pageInfo.pageSize}]];
	     //
		    $("#pagination").pagination({
	            currentPage: pageNum,
	            totalPage: pages,
	            isShow: true,
	            count: pageSize,
	            homePageText: "首頁",
	            endPageText: "尾頁",
	            prevPageText: "上一頁",
	            nextPageText: "下一頁",
	        });
	        //點選頁數
	        $('.ui-pagination-page-item').on('click', function () {
	            var pageNum = $(this).attr('data-current');
	            var zhanghao = $("#searchrole").val();   //這是搜尋時的引數,根據實際情況加或者不要
	            
	            window.location.href = encodeURI('/sys/role/index?pageNum=' + pageNum+'&rolename='+zhanghao);
	        });
			
	  </script>