spring boot后台分页实例

本文使用datatable + spring boot实现后台分页。当有大量数据，需要通过表形式展示时，需要进行后台分页，即每次只请求当前页面需要展示的数据。引用的库前台：jQuery 2.2.4DataTable 1.10Html5后台：Spring BootJPA(Hibernate)Maven作为示例，创建一个名为datatable的数据库。并创建名为tb_datatable的表，表中有id

嘀嗒中年

392人浏览 · 2020-07-18 21:58:10

嘀嗒中年 · 2020-07-18 21:58:10 发布

本文使用datatable + spring boot实现后台分页。

当有大量数据，需要通过表形式展示时，需要进行后台分页，即每次只请求当前页面需要展示的数据。

引用的库
前台：

jQuery 2.2.4
DataTable 1.10
Html5

后台：

Spring Boot
JPA(Hibernate)
Maven

作为示例，创建一个名为datatable的数据库。并创建名为tb_datatable的表，表中有id,column1,column2,column3共四列数据。如下图，共插入21行类似数据。随后将这21行数据通过datatable来展示。

示例数据

先给个示例项目结构图：
GetData.java:从数据库查询数据并返回前台的控制类
TestEntity.java:实体类
TestRepository.java:仓库接口
Datatable.java:返回前台数据的bean
在这里插入图片描述

首先，来看测试数据的实体(entity)类。来映射上述表的数据结构。

package com.wktechno.demodatatable.pojo;

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

@Entity
@Table(name="tb_datatable")
public class TestEntity {

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Column(name="id",columnDefinition = "BIGINT(64) UNSIGNED")
	private Long id;
	
	@Column(name="column1")
	private String column1;
	
	@Column(name="column2")
	private String column2;
	
	@Column(name="column3")
	private String column3;

	public Long getId() {
		return id;
	}

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

	public String getColumn1() {
		return column1;
	}

	public void setColumn1(String column1) {
		this.column1 = column1;
	}

	public String getColumn2() {
		return column2;
	}

	public void setColumn2(String column2) {
		this.column2 = column2;
	}

	public String getColumn3() {
		return column3;
	}

	public void setColumn3(String column3) {
		this.column3 = column3;
	}

	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + ((id == null) ? 0 : id.hashCode());
		return result;
	}

	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		TestEntity other = (TestEntity) obj;
		if (id == null) {
			if (other.id != null)
				return false;
		} else if (!id.equals(other.id))
			return false;
		return true;
	}

	@Override
	public String toString() {
		return "TestEntity [id=" + id + ", column1=" + column1 + ", column2=" + column2 + ", column3=" + column3 + "]";
	}
	
}

Datatable.java:返回前台数据的bean

package com.wktechno.demodatatable.responsebean;

import java.util.List;

import lombok.Data;

@Data
public class Datatable<T> {

    private int draw;
    private int start;
    private long recordsTotal;
    private long recordsFiltered;
    private List<T> data;

}

TestRepository.java:仓库接口

package com.wktechno.demodatatable.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import com.wktechno.demodatatable.pojo.TestEntity;

public interface TestRepository extends JpaRepository<TestEntity, Long>, JpaSpecificationExecutor<TestEntity>{

}

GetData.java:控制类
有两个方法
init()用来初始化页面
listAllTable()根据前台传来的开始页数，每页展示的个数等参数，查询数据库，并返回前台。

package com.wktechno.demodatatable.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.wktechno.demodatatable.pojo.TestEntity;
import com.wktechno.demodatatable.repository.TestRepository;
import com.wktechno.demodatatable.responsebean.Datatable;

@Controller
@RequestMapping(value = "/")
public class GetData {

	@Autowired
	TestRepository testRepository;
	
	@GetMapping(value = "")
	public String init(Model model) {
		
		return "demo";
	}
	
	@GetMapping(value = "/datatable/list")
	public ResponseEntity listAllTable( @RequestParam("draw") int draw,
	                                    @RequestParam("start") int start,
	                                    @RequestParam("length") int length) {

	    int page = start / length; //Calculate page number

	    Sort sort = Sort.by(Sort.Direction.ASC,"id");
	    Pageable pageable = PageRequest.of(page,length,sort) ;

	    Page<TestEntity> responseData = testRepository.findAll(pageable);

	    Datatable dataTable = new Datatable();

	    dataTable.setData( responseData.getContent() );
	    dataTable.setRecordsTotal( responseData.getTotalElements() );
	    dataTable.setRecordsFiltered( responseData.getTotalElements() );

	    dataTable.setDraw( draw );
	    dataTable.setStart( start );

	    return ResponseEntity.ok(dataTable);

	}
}

画面HTML(除了自己的javascript都直接用了cdn)：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-responsive-bs4/2.2.5/responsive.bootstrap4.min.css"/>
    <title>Datatable-demo</title>

</head>

<body>

<header>
	<nav class="navbar navbar-expand-md navbar-dark bg-dark">
	    <a class="navbar-brand" href="#">Datatable test</a>
	</nav>
</header>

<main role="main" class="container">
	<div class="mt-3">
		<table class="table table-hover m-0 tickets-list table-actions-bar dt-responsive nowrap cursor-pointer" cellspacing="0" width="100%" id="datatable">
			<thead class="text-center">
				<tr>
					<th>ID</th>
					<th>第1列</th>
					<th>第2列</th>
					<th>第3列</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</main>

<footer>
</footer>
<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-responsive-bs4/2.2.5/responsive.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="/static/js/demo.js"></script>
</body>
</html>

demo.js,页面刷新完成时，自动通过ajax请求数据。

$(function(){

	$('#datatable').DataTable({
	    "processing": true,
	    "serverSide": true,
	    "pageLength": 10,
	    "searching": false,
	    "info" : true,
	    "ajax": {
	        "url": "/datatable/list",
	        "method":"get",
	        "dataSrc": function (response) {
	
	            var data = response.data; // your data list
	
				console.log(data);
	            var all = [];
	
	            for (var i = 0; i < data.length; i++) {
	
	
	                var row = {
	
	                    rows: response.start + i + 1,
	                    id: data[i].id, // name ... ,
	                    column1: data[i].column1,
	                    column2: data[i].column2,
	                    column3: data[i].column3
	                };
	                all.push(row);
	            }
	            return all;
	        }
	
	    },
	    "columns": [
	        { "data": "id"},
	        { "data": "column1"},
	        { "data": "column2"},
	        { "data": "column3"}
	    ]
	});
});

实际运行效果(当点击下一页时，会自动发送请求)：
在这里插入图片描述

其他相关文件

application.yml(数据库地址和账号密码需要换成自己的)

server:
  port: 8082
  tomcat:
    uri-encoding: UTF-8
spring:
  application:
    name: demodatatable
  mvc: 
    static-path-pattern: static/**
  thymeleaf: 
    prefix: classpath:/templates/
    suffix: .html
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost/datatable?useSSL=false&serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&allowPublicKeyRetrieval=true
    username: root
    password: root
  #自动生成表
  jpa:
    generate-ddl: true
    open-in-view: false
    properties:
      hibernate:
        dialect: org.hibernate.dialect.MySQL5InnoDBDialect
        ddl-auto: update

POM

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.3.1.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.wktechno</groupId>
	<artifactId>demodatatable</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>demodatatable</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<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>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>