前端:我用的是layui框架的分页
js 文件
layui.config({
base : "script/"
}).use(['form','layer','jquery','laypage'],function(){
var form = layui.form(),
layer = parent.layer === undefined ? layui.layer : parent.layer,
laypage = layui.laypage,
$ = layui.jquery;
//分页参数
var currentPageAllAppoint = 1;
var totalPageAllAppoint = 0;
var dataLength = 0;
//加载页面数据
var deskData = [];
$(document).ready(function(){
getDataInfo(); // ajax请求
toPage();// 分页
});
function deskDataList(data){
$(".desk_content").html(renderDate(data,currentPageAllAppoint));
//渲染数据
function renderDate(data,curr){
var dataHtml = '';
var currData = data;
if(currData != null && currData.length != 0){
for(var i=0;idataHtml += '
'
+ ''
+ ''+isNull(currData[i].name)+''
+ ''+isNull(currData[i].index)+''
+ ''+isNull(currData[i].roomId)+''
+ ''+isNull(currData[i].players)+''
+ ''+isNull(currData[i].descript)+''
+ ''+isNull(currData[i].observers)+''
+ ''+format(currData[i].createTime)+''
+'';
}
}else{
dataHtml = '
暂无数据';
}
return dataHtml;
}
}
function getDataInfo(){
console.log("getDataInfo");
$.ajax({
type:"post",
async:false,
url:"../../../bim/desk/findDesk",
data:{curr : currentPageAllAppoint},
success:function(data,status){
console.log(data);
totalPageAllAppoint = data.content.last;//总页数(后台返回)
console.log(currentPageAllAppoint);
console.log(totalPageAllAppoint);
deskDataList(data.content.data);
}
});
}
function toPage(data){
//分页
var nums = 10; //每页出现的数据量
laypage({
cont : "page",
pages : totalPageAllAppoint,//TODO 获取后台传进的数据Page中的totalCount 总条数
curr : currentPageAllAppoint,
jump : function(obj,first){
//?第二次的时候怎么判断
currentPageAllAppoint = obj.curr;
if(!first){
getDataInfo();
}
$('.desk_list thead input[type="checkbox"]').prop("checked",false);
form.render();
}
})
}
后端:主要是写一个接口来接收传递过来的数据
第一步:代码实现Controller 类
@RestController
@RequestMapping(path = "/bim/desk",produces = MediaType.APPLICATION_JSON_VALUE)
public class DeskContorller extends BaseController {
@Autowired
private DeskService deskService;
@Autowired
private DeskTransfer deskTransfer;
@RequestMapping(path = "/findDesk")
public Result> findDeskByName( @RequestParam("curr") Integer curr,HttpSession session) throws BizException{
Paginationdesk = this.deskService.findDeskByName((curr - 1) * 10,10);
PagedeskData = desk == null ? null : Page.transfer(desk, this.deskTransfer, curr, 10);
return Result.createSuccessResultFrom(deskData);
}
}
注释:DeskData作为前端的请求结果,传给前端的字段,以及查询内容
具体的查询语句就自己发挥就好,mysql数据库只要加上start,limit就好了
1,Pagination类:(可以写成公共类)
public final class Paginationimplements java.io.Serializable {
private static final long serialVersionUID = -9130388649947529938L;
private final int totalCount; // 总条数:用在Page计算最后一页
private final ListpageRecords; // 数据量
public Pagination(ListpageRecords, int totalCount) {
this.pageRecords = CollectionUtils.isEmpty(pageRecords) ? Collections.emptyList() : Collections.unmodifiableList(pageRecords);
this.totalCount = Math.max(0, totalCount);
}
public Pagination(Record[] pageRecords, int totalCount) {
this(pageRecords == null ? Collections.emptyList() : Arrays.asList(pageRecords), totalCount);
}
public ListgetPageRecords() {
return this.pageRecords;
}
public int getTotalCount() {
return this.totalCount;
}
}
2,Page的实现 (可以写成公共类)
package me.mjzx.foundation.web;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import org.apache.commons.collections4.CollectionUtils;
import me.mjzx.foundation.Pagination;
import me.mjzx.foundation.Transfer;
public final class Page{
// 将从后台取出的Pagination桌子信息,转化成Page的
public static Pagetransfer(Paginationpagination,DeskTransfertransfer,int currPage,
int pageSize) {
Listrecords = Collections.emptyList();
final ListpageRecords = pagination == null ? null : pagination.getPageRecords();
final int totalCount = pagination == null ? 0 : Math.max(0, pagination.getTotalCount());
if (CollectionUtils.isNotEmpty(pageRecords) && transfer != null) {
records = new ArrayList<>(pageSize = Math.max(pageSize, pageRecords.size()));
for (final Record record : pageRecords) {
records.add(transfer.translate(record));
}
}
return new Page<>(currPage, pageSize, totalCount % pageSize == 0 ? totalCount / pageSize : totalCount / pageSize + 1, records);
}
private final int curr; // 当前页 ,
private final int size;// 限制长度
private final int last; // 最后一页
private final Listdata; // 当前页的数据
public Page(int curr, int size, int last, Listdata) {
this.curr = Math.max(1, curr);
this.size = Math.max(1, size);
this.last = Math.max(1, last);
this.data = Collections.unmodifiableList(data);
}
.....此处省略getter ,setter方法
}
3,Transfer转换类
public class DeskTransfer {
@Override
public Desk translate(DeskData value) {
// TODO Auto-generated method stub
return null;
}
@Override // 将Desk转换成DeskData
public DeskData translate(Desk record) {
DeskData deskData = new DeskData();
try {
deskData.setDeskId(record.getId());
deskData.setDescript(record.getDescript());
deskData.setIndex(record.getIndex());
deskData.setName(record.getName());
deskData.setObservers(record.getObservers().toString());
deskData.setRoomId(record.belongTo() == null ? null : record.belongTo().getId());
Match4Ddz match = this.matchService.findMatchByDesk(record.getId());
Listusers = match == null ? null : this.joinService.findJoinUsersByMatch(match.getId());
deskData.setPlayers(users == null || users.size() == 0 ? null : this.tranf(users));
deskData.setCreateTime(record.getCreateTime());
} catch (BizException e) {
e.printStackTrace();
}
return deskData;
}
}
4,DeskData的字段(传到前端显示的字段)
public class DeskData extends BaseData{
private static final long serialVersionUID = 1431046417980934140L;
private Integer deskId;
private String name;
private Integer index;
private Integer roomId;
private Listplayers;
private String descript;
private String observers;
private long createTime;
....此处省略getter setter方法
}