springboot用thymeleaf模板的paginate分页完整代码

本文根据一个简单的user表为例,展示 springboot集成mybatis,再到前端分页完整代码(新手自学,不足之处欢迎纠正);

先看java部分

pom.xml 加入 

<!--支持 Web 应用开发,包含 Tomcat 和 spring-mvc。 -->

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

<!--Mybatis-->

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

<!-- mybatis pagehelper -->

<dependency>

<groupId>com.github.pagehelper</groupId>

<artifactId>pagehelper</artifactId>

<version>3.6.3</version>

</dependency>

<!--Mysql / DataSource-->

<dependency>

<groupId>org.apache.tomcat</groupId>

<artifactId>tomcat-jdbc</artifactId>

</dependency>

<dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

</dependency>

<!--springboot 集成Mybatis所需jar配置 end-->

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));

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;

}

前端代码开始

statis目录下加入如下几个文件

在templates目录下建立一个前端分页工具页面 page.html,(虽然代码不多,封装这点东西花费我半天时间!!)

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:th="http://www.thymeleaf.org">

<head th:fragment="page">

<link rel="stylesheet" th:href="@{/css/pagestyle.css}" rel="external nofollow" />

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

</head>

</html>

接下来就是引用分页插件了。

在templates目录下建立userlist.html.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8"/>

<title>用户列表</title>

</head>

<body>

<div style="width: 1000px;" >

<table style="border-width: 1px;border-style: dashed;">

<tr>

<td>ID</td>

<td>姓名</td>

<td>密码</td>

</tr>

<p th:each="user:${list}">

<tr>

<td th:text="${user.id}">ID</td>

<td th:text="${user.name}">姓名</td>

<td th:text="${user.password}">密码</td>

</tr>

</p>

</table>

<div id="page" url="/userlist" ></div>

<div th:replace="page :: page"></div>

</div>

</body>

</html>

可以看到 引用分页的代码 只有两句,是不是很好用

<div id="page" url="/userlist" ></div>

<div th:replace="page :: page"></div>

以上是 springboot用thymeleaf模板的paginate分页完整代码 的全部内容, 来源链接: utcz.com/p/213676.html

回到顶部