layui 传递前端请求_前端请求后端，后端查询完毕传到前端 ，用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){

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方法

}