一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務(wù)器之家:專注于服務(wù)器技術(shù)及軟件下載分享
分類導(dǎo)航

PHP教程|ASP.NET教程|Java教程|ASP教程|編程技術(shù)|正則表達(dá)式|C/C++|IOS|C#|Swift|Android|VB|R語言|JavaScript|易語言|vb.net|

服務(wù)器之家 - 編程語言 - Java教程 - springboot用thymeleaf模板的paginate分頁完整代碼

springboot用thymeleaf模板的paginate分頁完整代碼

2020-12-08 15:05若星漢浮云 Java教程

本文根據(jù)一個(gè)簡單的user表為例,展示 springboot集成mybatis,再到前端分頁完整代碼,需要的朋友可以參考下

本文根據(jù)一個(gè)簡單的user表為例,展示 springboot集成mybatis,再到前端分頁完整代碼(新手自學(xué),不足之處歡迎糾正);

先看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 應(yīng)用開發(fā),包含 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&amp;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

啟動(dòng)類 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 {
   //定義一個(gè)全局的記錄器,通過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);
  }
}

以一個(gè)簡單的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>

到此時(shí)后臺(tái)代碼結(jié)束

附加個(gè)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目錄下加入如下幾個(gè)文件

springboot用thymeleaf模板的paginate分頁完整代碼

在templates目錄下建立一個(gè)前端分頁工具頁面 page.html,(雖然代碼不多,封裝這點(diǎn)東西花費(fèi)我半天時(shí)間?。。?/p>

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

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

可以看到 引用分頁的代碼 只有兩句,是不是很好用

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

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

 

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板: 无遮掩60分钟从头啪到尾 | 国产亚洲精品精品国产亚洲综合 | 日产2021免费一二三四区 | 欧美高清乌克兰精品另类 | 热巴在公交车h文 | 亚洲免费色图 | 久久99r66热这里只有精品 | 国产精品探花一区在线观看 | 国产精品一区二区不卡的视频 | 4438成人网 | sese在线播放| 19+韩国女主播激情vip视频在线 | 男人午夜视频在线观看 | 免费特黄视频 | 欧美午夜精品久久久久久黑人 | 亚洲 欧美 国产 综合久久 | 日本视频一区在线观看免费 | 国产成人精品视频一区 | 日韩一级精品视频在线观看 | 3x3x3x短视频在线看 | 国产精品欧美在线观看 | 青青草视频破解版 | 亚洲国产视频网站 | 美女被视频网站看免费入口 | 日产乱码卡1卡2卡三卡四在线 | 欧美一卡2卡三卡4卡5卡免费观看 | 日本人做受全过程视频 | 被夫上司侵犯了中文字幕 | 色综合色狠狠天天综合色 | 国产成人在线视频播放 | 青草香蕉精品视频在线观看 | 国产福利微拍精品一区二区 | 欧美亚洲第一区 | 色五婷婷 | 色综合精品| 三级无删减高清在线影院 | 日韩精品一区二三区中文 | 青青草原手机在线视频 | 国产一级黄色网 | 久久毛片免费看一区二区三区 | 韩国日本在线观看 |