springboot用thymeleaf模板的paginate分頁

知識 08-01

本文根據一個簡單的user表為例，展示 springboot集成mybatis，再到前端分頁完整代碼（新手自學，不足之處歡迎糾正）；

先看java部分

pom.xml 加入

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.2.2</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.2.8</version>
</dependency>
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.2</version>
</dependency>

<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>3.6.3</version>
</dependency>

<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-jdbc</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>

application.properties文件

spring.datasource.platform=mysql
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driverClassName=com.mysql.jdbc.Driver
# Advanced configuration...
spring.datasource.max-active=50
spring.datasource.max-idle=6
spring.datasource.min-idle=2
spring.datasource.initial-size=6

#create table
spring.jpa.hibernate.ddl-auto=validate

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false

啟動類 Application.java

@SpringBootApplication
@MapperScan("com.boot.mapper")
public class Application {
//定義一個全局的記錄器，通過LoggerFactory獲取
private final static Logger logger = LoggerFactory.getLogger(Application.class);

//----------------------------mybaits配置start-------------------------------------------
//DataSource
@Bean
@ConfigurationProperties(prefix="spring.datasource")
public DataSource dataSource {
return new org.apache.tomcat.jdbc.pool.DataSource;
}
//SqlSessionFactory
@Bean
public SqlSessionFactory sqlSessionFactoryBean throws Exception {

SqlSessionFactoryBean sqlSessionFactoryBean = new SqlSessionFactoryBean;
sqlSessionFactoryBean.setDataSource(dataSource);

PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver;

sqlSessionFactoryBean.setMapperLocations(resolver.getResources("classpath:mapper/*.xml"));

return sqlSessionFactoryBean.getObject;
}
@Bean
public PlatformTransactionManager transactionManager {
return new DataSourceTransactionManager(dataSource);
}
//------------------------------mybaits配置end---------------------------------
public static void main(String[] args){
System.out.println("Hello World!");
SpringApplication.run(Application.class, args);
}
}

以一個簡單的user對象為例

private Integer id;

private String name;

private String password;

controller層

@RestController
public class UserController {
@Autowired
UserService uSer;
@RequestMapping("userlist")
public Object userlist(@RequestParam(value="pageon",defaultValue="1")int pageon
,ModelAndView mv){
mv.addAllObjects(uSer.UserList(pageon));
mv.setViewName("userlist"); return mv; } }

service層

public Map<String, Object> UserList(int pageon) {
// TODO Auto-generated method stub
Map<String,Object> map=new HashMap<String, Object>;
Page page=new Page(pageon);
page.setRowcountAndCompute(userMapper.selectPageListCount(null));
map.put("page", page);
map.put("list", userMapper.selectPageList(map));
return map;
}

UserMapper.xml

<select id="selectPageList" parameterType="java.util.Map" resultMap="BaseResultMap" >
select id, name, password from user order by id limit #{page.start},#{page.row}
</select>
<select id="selectPageListCount" parameterType="java.util.Map" resultType="int" >
select count(1) from user
</select>

到此時後台代碼結束

附加個page工具類

package com.boot.utils;

import java.io.Serializable;

public class Page implements Serializable {

/**
*
*/
private static final long serialVersionUID = 1L;
public int getPageon {
return pageon;
}

public void setPageon(int pageon) {
this.pageon = pageon;
}

public int getRowcount {
return rowcount;
}

public void setRowcount(int rowcount) {
this.rowcount = rowcount;
}

public int getPagecount {
return pagecount;
}

public void setPagecount(int pagecount) {
this.pagecount = pagecount;
}

public int getRow {
return row;
}

public void setRow(int row) {
this.row = row;
}

public Page(int pageon, int row, int rowcount) {
pageNumber = 11;
this.pageon = pageon;
this.row = row;
this.rowcount = rowcount;
compute;
}

public Page(int pageon, int row) {
pageNumber = 11;
this.pageon = pageon;
this.row = row;
}
public Page(int pageon) {
pageNumber = 11;
this.pageon = pageon;
}

public Page {
pageNumber = 11;
}

public int getPageNumber {
return pageNumber;
}

public void setPageNumber(int pageNumber) {
this.pageNumber = pageNumber;
}

public void compute {
if (rowcount <= 0)
return;
if (row <= 0)
row = 10;
pagecount = rowcount % row != 0 ? rowcount / row + 1 : rowcount / row;
if (pageon > pagecount)
pageon = pagecount;
if (pageon < 1)
pageon = 1;
start = (pageon - 1) * row;
end = pageon * row;
if (end > rowcount)
end = rowcount;
}

public int getStart {
return start;
}

public void setStart(int start) {
this.start = start;
}

public int getEnd {
return end;
}

public void setEnd(int end) {
this.end = end;
}

public void setRowcountAndCompute(int rowcount) {
this.rowcount = rowcount;
compute;
}

protected int pageon;
protected int rowcount;
protected int pagecount;
protected int row;
protected int start;
protected int end;
protected int pageNumber;
}

View Code

前端代碼開始

statis目錄下加入如下幾個文件

在templates目錄下建立一個前端分頁工具頁面 page.html,（雖然代碼不多，封裝這點東西花費我半天時間！！）

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<div th:fragment="page">
<link rel="stylesheet" th:href="@{/css/pagestyle.css}" />
<script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.paginate.js}"></script>
<script th:inline="javascript">
(function($) {
/*<![CDATA[*/
var count=[[${page.pagecount}]];
var start=[[${page.pageon}]];
/*]]>*/
var url=$("#page").attr("url");
var displaycnt=count>10?10:count;
fenye(count,start,url,displaycnt);
})(jQuery);
function fenye(count,start,url,displaycnt){
/*<![CDATA[*/
if(count<2)
return;
/*]]>*/
$("#page").paginate({
count : count,
start : start,
display : displaycnt,
border : true,
border_color : "#fff",
text_color : "#fff",
background_color : "pink",
border_hover_color : "#ccc",
text_hover_color : "#000",
background_hover_color : "#fff",
images : true,
mouse : "press",
onChange: function(page_index) {
var tourl;
/*<![CDATA[*/
if(url.indexOf("?")>0)
tourl=url+"&pageon="+page_index;
else
tourl=url+"?pageon="+page_index;
window.location.href=tourl;
/*]]>*/
}
});
};
</script>
</div>
</html>