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