天天看點

SpringBoot+pagehelper+bootstrap分頁

1.建立資料庫表,以oracle中建立users資料表為例并添加資料

-- 使用者資訊表
create table users(
       u_id integer primary key, -- 使用者id
       u_name varchar2(30) not null unique, --使用者姓名
       u_password varchar2(16) not null, --使用者密碼
       u_phone varchar2(11) unique, --使用者手機号
       u_email varchar2(26) unique, --使用者郵箱
       u_jurisdiction varchar2(40) not null --使用者權限
);
--使用者表自動增長序列
create sequence sequence_uid start with 1 increment by 1;

-- 使用者表id觸發器
create or replace trigger tr_users
before insert on users
for each row
begin
select sequence_uid.nextval into :new.u_id from dual;
end;

insert into users(u_name,u_password,u_phone,u_email,u_jurisdiction)
values('admin','admin','17684542','[email protected]','user:amdin');
commit;

insert into users(u_name,u_password,u_phone,u_email,u_jurisdiction)
values('張三','user','123465888','[email protected]','user:update');
commit;

insert into users(u_name,u_password,u_phone,u_email,u_jurisdiction)
values('李四','user','163746734','[email protected]','user:update');
commit;

insert into users(u_name,u_password,u_phone,u_email,u_jurisdiction)
values('qq','user','454545454','[email protected]','user:update');
commit;

insert into users(u_name,u_password,u_phone,u_email,u_jurisdiction)
values('ww','user','13435454','[email protected]','user:update');
commit;

insert into users(u_name,u_password,u_phone,u_email,u_jurisdiction)
values('ee','user','767657567','[email protected]','user:update');
commit;

insert into users(u_name,u_password,u_phone,u_email,u_jurisdiction)
values('tt','user','8989898','[email protected]','user:update');
commit;
           

2.修改pom.xml檔案,引入pagehelper依賴

<!-- pagehelper分頁插件 -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>5.1.4</version>
		</dependency>
		
		<!-- 分頁插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>
           

3.打開application.properties,配置分頁

#分頁插件
pagehelper.helper-dialect=oracle  #指定資料庫,對應什麼資料庫就寫什麼,沒寫會自動檢測
pagehelper.params=count=countSql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true
           

4.直接用mybatis逆向工程插件建立相應的方法,具體可看之前的部落格SpringBoot使用mybatis插件自動建立逆向工程

5.添加一個RequestMapping

@RequestMapping("searchuser")
	public String searchUser(Model model,@RequestParam(value="pageNum",defaultValue="1")Integer pageNum) {
		//查詢之前調用startPage,就是每頁顯示多少條資料
		PageHelper.startPage(pageNum, 3);
		
		//拿到所有使用者資料
		List<Users> list = userServiceImp.queryAllUsers();
		
        //将查詢到的資料放入pagehepler中
		PageInfo<Users> pageInfo = new PageInfo<Users>(list);

		// 将查詢到的資料存到傳回
		model.addAttribute("pageInfo", pageInfo);
		return "userfrom";
	}
           

6.在src/main/resources的templates下建立一個userfrom.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>所有使用者</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
<script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
	<div align="center">
		<table  id="mytable"
			class="table table-striped table-hover table-condensed table-bordered">
			<thead>
				<tr>
					<th>id</th>
					<th>姓名</th>
					<th>手機号</th>
					<th>郵箱</th>
					<th>權限</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="users:${pageInfo.list}">
					<td th:text="${users.u_id}"></td>
					<td th:text="${users.u_name}"></td>
					<td th:text="${users._phone}"></td>
					<td th:text="${users.u_email}"></td>
					<td th:text="${users.u_jurisdiction}"></td>
				</tr>
			</tbody>
		</table>
		<p>
			目前 <span th:text="${pageInfo.pageNum}"></span> 頁,總 <span
				th:text="${pageInfo.pages}"></span> 頁,共 <span
				th:text="${pageInfo.total}"></span> 條記錄
		</p>
		<ul class="pagination">
			<li><a th:href="@{/user/searchuser}" target="_blank" rel="external nofollow" >第一頁</a> </li>
			<li><a th:href="@{/user/searchuser(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" target="_blank" rel="external nofollow" >上一頁</a></li>
			<li><a th:href="@{/user/searchuser(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" target="_blank" rel="external nofollow" >下一頁</a></li>
			<li><a th:href="@{/user/searchuser(pageNum=${pageInfo.pages})}" target="_blank" rel="external nofollow" >最後一頁</a></li>
		</ul>
	</div>
</body>
</html>
           

7.啟動項目,浏覽器輸入http://localhost:8089/user/searchuser(成功)

SpringBoot+pagehelper+bootstrap分頁

繼續閱讀