前端請求後端，後端查詢完畢傳到前端 ，用layui 將 資料分頁
前端：我用的是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){
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].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方法
}