前端:我用的是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;i<currData.length;i++){
dataHtml += '<tr>'
+ '<td><input type="checkbox" name="checked" lay-skin="primary" lay-filter="choose"></td>'
+ '<td>'+isNull(currData[i].name)+'</td>'
+ '<td>'+isNull(currData[i].index)+'</td>'
+ '<td>'+isNull(currData[i].roomId)+'</td>'
+ '<td>'+isNull(currData[i].players)+'</td>'
+ '<td>'+isNull(currData[i].descript)+'</td>'
+ '<td>'+isNull(currData[i].observers)+'</td>'
+ '<td>'+format(currData[i].createTime)+'</td>'
+'</tr>';
}
}else{
dataHtml = '<tr><td colspan="8">暂无数据</td></tr>';
}
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<DeskData> 中的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<Page<DeskData>> findDeskByName( @RequestParam("curr") Integer curr,HttpSession session) throws BizException{
Pagination<Desk> desk = this.deskService.findDeskByName((curr - 1) * 10,10);
Page<DeskData> deskData = desk == null ? null : Page.transfer(desk, this.deskTransfer, curr, 10);
return Result.createSuccessResultFrom(deskData);
}
}
注释:DeskData作为前端的请求结果,传给前端的字段,以及查询内容
具体的查询语句就自己发挥就好,mysql数据库只要加上start,limit就好了
1,Pagination类:(可以写成公共类)
public final class Pagination<Record> implements java.io.Serializable {
private static final long serialVersionUID = -9130388649947529938L;
private final int totalCount; // 总条数:用在Page计算最后一页
private final List<Record> pageRecords; // 数据量
public Pagination(List<Record> pageRecords, 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 List<Record> getPageRecords() {
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<Data extends BaseData> {
// 将从后台取出的Pagination<Desk>桌子信息,转化成Page<DeskData>的
public static <Record, Data extends BaseData> Page<Data> transfer(Pagination<Record> pagination,DeskTransfer<Record, Data> transfer,int currPage,
int pageSize) {
List<Data> records = Collections.emptyList();
final List<Record> pageRecords = 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 List<Data> data; // 当前页的数据
public Page(int curr, int size, int last, List<Data> data) {
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<Desk, DeskData> 转换类
public class DeskTransfer <Desk, DeskData> {
@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());
List<User> users = 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 List<Integer> players;
private String descript;
private String observers;
private long createTime;
....此处省略getter setter方法
}