springboot后台分页实例
本⽂使⽤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(){
public Long getId(){
springboot结构return id;
}
public void setId(Long id){
this.id = id;
}
public String getColumn1(){
return column1;
}
public void setColumn1(String column1){
}
public String getColumn2(){
return column2;
}
public void setColumn2(String column2){
}
public String getColumn3(){
return column3;
}
public void setColumn3(String 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()!= Class())
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.sponsebean;
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.pository;
import org.springframework.pository.JpaRepository;
import org.springframework.pository.JpaSpecificationExecutor;
import com.wktechno.demodatatable.pojo.TestEntity;
public interface TestRepository extends JpaRepository<TestEntity, Long>, JpaSpecificationExecutor<TestEntity>{ }
GetData.java：控制类
有两个⽅法
init()⽤来初始化页⾯
listAllTable()根据前台传来的开始页数，每页展⽰的个数等参数，查询数据库，并返回前台。
package com.ller;
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.pository.TestRepository; import com.sponsebean.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( Content());
dataTable.setRecordsTotal( TotalElements()); dataTable.setRecordsFiltered( TotalElements());
dataTable.setDraw( draw );
dataTable.setStart( start );
return ResponseEntity.ok(dataTable);
}
}
画⾯HTML(除了⾃⼰的javascript都直接⽤了cdn)：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论