码迷,mamicode.com
首页 > 编程语言 > 详细

springboot用thymeleaf模板的paginate分页

时间:2017-07-31 11:22:11      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:ima   hashmap   jpa   pre   []   UI   perl   serial   width   

本文根据一个简单的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&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

启动类 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;
}
View Code

前端代码开始

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}" />
<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分页

标签:ima   hashmap   jpa   pre   []   UI   perl   serial   width   

原文地址:http://www.cnblogs.com/changhai/p/7262071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!