天天看點

Spring boot分頁顯示資料(1)

spring boot分頁顯示資料(1)

記錄一下~

我們從簡入繁,先使用一種通過頁面重新整理來實作分頁資料展示的方法~

下面是一個簡單的栗子

使用工具:spring-data-jpa,thymeleaf

實體類: 實體類中不要忘記定義空的構造方法哦~否則會出錯

package com.example.demo.domain;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * Created by 18274 on 2017/9/18.
 */
@Entity
public class Person {
    @Id
    @GeneratedValue
    private Long id;
    private String name;
    public Person(){}

    public Long getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public void setName(String name) {
        this.name = name;
    }
}
           

PersonRepository類

package com.example.demo.dao;

import com.example.demo.domain.Person;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

/**
 * Created by 18274 on 2017/9/18.
 */
public interface PersonRepository extends JpaRepository<Person,Long>{
        List<Person> findByIdBetween(long id1,long id2);

}
           

Control控制層:

測試頁面中我們設定了每頁展示的資料條數為5條,可以根據需求在

long top1=top/5+1 中進行修改,比如改為long top1=top/6+1,則頁面最多顯示的資料條數将變為6條

package com.example.demo.control;

import com.example.demo.dao.PersonRepository;
import com.example.demo.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by 18274 on 2017/9/18.
 */
@Controller
public class Control {
    @Autowired
    PersonRepository personRepository;
    @RequestMapping(value="/fenye")
    public String fenye(@RequestParam(value="number",defaultValue = "1") long number,
                        Model model){
        List<Person> person=personRepository.findAll();
        long top=(long) person.size();
        long top1=top/+;
        if(number==)
            number=L;
        if(number==top1+)
            number=top1;
        long di=(number-)*+;
        long gao=number*;
        List<Person> persons=personRepository.findByIdBetween(di,gao);
        model.addAttribute("persons",persons);
        model.addAttribute("number",number);
        model.addAttribute("top1",top1);
        System.out.println(number);
        return "fenye";
    }
}
           

MySql資料庫中對應的Person表

Spring boot分頁顯示資料(1)

fenye.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<ul class="list-group">
    <li class="list-group-item" th:each="person:${persons}">
        <span th:text="${person.name}"></span>
    </li>
</ul>
<div>
    <!--頁碼-->
    <a th:href="@{/fenye(number=1)}">1</a>
    <a th:href="@{/fenye(number=2)}">2</a>
    <a th:href="@{/fenye(number=3)}">3</a>
    <span th:if="${number} ge 10">...</span>
    <span th:each="i :${#numbers.sequence(1,top1)}">
    <a th:if="(${i} le ${number}+3 and ${i} le ${top1}-3) and (${i} ge ${number}-3 and ${i} ge 4)" th:href="@{/fenye(number=${i})}" th:text="${i}"></a>
</span>
    <span th:if="${number} le ${top1}-10">...</span>
    <a th:href="@{/fenye(number=${top1}-2)}" th:text="${top1}-2">1</a>
    <a th:href="@{/fenye(number=${top1}-1)}" th:text="${top1}-1">1</a>
    <a th:href="@{/fenye(number=${top1})}" th:text="${top1}"></a>
    <a th:href="@{/fenye(number=${number}-1)}">上一頁</a>
    <a th:href="@{/fenye(number=${number}+1)}">下一頁</a>
</div>
</body>
</html>
<!--分頁顯示資料-->
           

生成頁面展示:

Spring boot分頁顯示資料(1)

頁面做的很簡單~沒有添加樣式~

頁面中的頁碼是通過thymeleaf來實作的,設計的比較簡單~

繼續閱讀