前端请求后端,后端查询完毕传到前端 ,用layui 将 数据分页

2017-10-27 18:57:23来源:CSDN作者:Jon_jing人点击

分享
第七城市

前端:我用的是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方法

}

第七城市

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台