首页 > 编程 > Java > 正文

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

2019-11-26 11:45:55
字体:
来源:转载
供稿:网友

本文根据一个简单的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=mysqlspring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8spring.datasource.username=rootspring.datasource.password=rootspring.datasource.driverClassName=com.mysql.jdbc.Driver# Advanced configuration...spring.datasource.max-active=50spring.datasource.max-idle=6spring.datasource.min-idle=2spring.datasource.initial-size=6#create tablespring.jpa.hibernate.ddl-auto=validatespring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.suffix=.htmlspring.thymeleaf.mode=HTML5spring.thymeleaf.encoding=UTF-8spring.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层

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表