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

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

先看java部分

pom.xml 加入 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!--支持 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文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@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对象为例

1
2
3
private Integer id;
   private String name;
   private String password;

controller层

1
2
3
4
5
6
7
8
9
10
11
@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层

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
6
<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工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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,(虽然代码不多,封装这点东西花费我半天时间!!)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html >
   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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
   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>

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

1
2
<div id= "page" url= "/userlist" ></div>
<div th:replace= "page :: page" ></div>

原文链接:http://www.cnblogs.com/changhai/p/7262071.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值