最近在項(xiàng)目中遇到表格數(shù)據(jù)量較大的情況澳厢，所以考慮進(jìn)行分頁(yè)加載环础，并且需要能夠記錄跨頁(yè)的選項(xiàng)，于是想到一種客戶端根據(jù)數(shù)據(jù)總長(zhǎng)度進(jìn)行表格數(shù)據(jù)初始化的操作剩拢，再根據(jù)頁(yè)碼進(jìn)行數(shù)據(jù)填充线得，避免一次行請(qǐng)求過(guò)多數(shù)據(jù)。
客戶端設(shè)置如下：
constructor() {
super();
this.columns = [
{
title: '序號(hào)',
dataIndex: 'order',
width: '20%',
},
{
title: '廣告牌編號(hào)',
dataIndex: 'device_id',
width: '20%',
},
{
title: '所屬公司',
dataIndex: 'device_company',
width: '20%',
},
{
title: '所屬區(qū)域',
dataIndex: 'device_region',
width: '20%',
},
{
title: '所屬路段',
dataIndex: 'device_road',
width: '20%',
},
];
this.state = {
devData:[],
selectedRowKeys: [],
isModalShow:false,
currentPage:1,
loadedPages:[], //已經(jīng)加載過(guò)的頁(yè)
totalNum:0,
};
}
componentDidMount() {
this.getTotalNum();
}
getTotalNum(){
let self=this;
let dataSend={
userName: CURRENT_USER,
};
console.log(dataSend);
$.ajax({
url: API_URL + "/system/data_permission/getBillboardTotal",
type: "POST",
data: dataSend,
success: function (result) {
console.log(result);
let total=result.totalNum;
console.log(total);
let tableData = [];
for (let i = 0; i <total; i++) { //根據(jù)總長(zhǎng)度對(duì)表格數(shù)據(jù)初始化
tableData.push({
key: i,
order: i + 1,
device_id: '',
device_company: '',
device_region: '',
device_road: '',
});
}
self.setState({totalNum:total,devData:tableData});
self.getDevData(1);
},
error: function (error) {
if (error.responseText) {
message.error(error.responseText);
} else {
message.error('請(qǐng)求出錯(cuò)啦');
}
}
});
}
getDevData(page){
let self=this;
if(this.state.loadedPages.indexOf(page)=== -1){ //如果某頁(yè)數(shù)據(jù)重未加載過(guò)徐伐，則發(fā)起請(qǐng)求
let dataSend={
userName:CURRENT_USER,
page:page,
};
console.log(dataSend);
$.ajax({
url: API_URL + "/system/data_permission/getBillboardData",
type: "POST",
data: dataSend,
success: function (result) {
console.log(result);
let data=result.data.tableData;
let tableData=self.state.devData;
let len=data.length;
console.log(len)
for (let i = 0; i <len; i++) {
let index=i+(page-1)*8;
tableData[index].key= data[i].billboardId;
tableData[index].device_id= data[i].billboardId;
tableData[index].device_company= data[i].connectCompany;
tableData[index].device_region= data[i].connectRegion;
tableData[index].device_road= data[i].connectRoad;
}
self.setState({loadedPages:self.state.loadedPages.concat(page)});
console.log(self.state.devData,self.state.loadedPages);
},
error: function (error) {
if (error.responseText) {
message.error(error.responseText);
} else {
message.error('請(qǐng)求出錯(cuò)啦');
}
}
});
}
}
onTableSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({selectedRowKeys});
}
onPageChange(page){
console.log(page);
this.setState({
currentPage: page,
});
this.getDevData(page);
}
render(){
const {selectedRowKeys} = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onTableSelectChange.bind(this),
};
const pagination = {
pageSize: 8,
total:this.state.totalNum,
onChange:this.onPageChange.bind(this),
current:this.state.currentPage,
};
const hasSelected = selectedRowKeys.length > 0;
return (
<div>
<Table columns={this.columns} dataSource={this.state.devData}
pagination={pagination}
rowSelection={rowSelection}
style={{
marginTop: 5, marginBottom: 5, marginRight: 5, marginLeft: 5
}}/>
</div>
);
}
服務(wù)端設(shè)置如下：其中35代表數(shù)據(jù)總長(zhǎng)度,8代表客戶端中表格每頁(yè)條目數(shù)贯钩，可以根據(jù)需求修改
console.log(req.body);
let page=req.body.page;
let lastPage=Math.ceil(35/8);//最后一頁(yè)所在頁(yè)碼
let lastPageLen=35%8;//最后一頁(yè)長(zhǎng)度
console.log(lastPage);
console.log(lastPageLen);
if(page===lastPage.toString()&&lastPageLen!=0){//避免剛好整除的情形
let data=[];
for(let i=0;i<lastPageLen;i++){
let str=(page-1)*8+(i+1);
data.push({
billboardId:'廣告牌'+str,
connectCompany:'企業(yè)',
connectRegion:'區(qū)域',
connectRoad:'路段',
});
}
let result={
data: {
tableData:data,
}
}
res.send(result);
}else{
let data=[];
for(let i=0;i<8;i++){
let str=(page-1)*8+(i+1);
data.push({
billboardId:'廣告牌'+str,
connectCompany:'企業(yè)',
connectRegion:'區(qū)域',
connectRoad:'路段',
});
}
let result={
data: {
tableData:data,
}
}
res.send(result);
}
