当后端一次性返回100条+数据前端如何进行处理？
前端如何将接口返回数据转化成符合前端业务逻辑的数据结构？
带着这些问题看文章，希望对你有所帮助！
1. 应用场景
2. 思路分析
3. 代码块分析
4. 具体实现代码
应用场景
当后端一次性返回100条+数据前端如何处理？
当后端设计表结构时未设计分页字段，或者采用第三方接口一次性返回所有数据 要求前端实现分页功能？
思路分析
实现需求之前思考这些问题
1.前端实现分页功能首先要搞清楚实现分页功能需要哪些参数？如何去做？？
2.如何对接口返回的数据进行处理？后端一次性返回100条数据如何进行处理？
问题解答
1.具体实现分页功能需要的参数有：
pagecount 总页数
page 当前页数
pageNum 页面默认展示数据的条数
pagelist 页面展示数据条数的数组
ctDataList 存放页面展示数据的数组
ctData 存放后端返回的数组
2.页面展示的数据一般默认都是10条，通过函数封装pageDataFn得到新数组ctDataList用于存放页面展示的数组； 至于函数如何封装请仔细阅读代码块分析！
如果后端一次性返回100条数据，通过函数封装也能轻松实现 so easy！！！
代码块分析
1.将接口返回数据进行简单处理
pageDataFn: function (pageNum, page, data) {//条数 当前页 原数组
var pagedata = [];
var start = (pageNum * page) - pageNum;
var end = pageNum * page;
end = end > data.length ? data.length : end;
for (let i = start; i < end; i++) {
pagedata.push(data[i])
}
return pagedata;
},
通过函数封装的方式，将接口返回的原数组进行处理，将处理后的数据放到一个新数组pagedata中，用于前端展示
start 表示从第几条数据开始截取 默认为0 （页数*页码-当前页数）
end 表示数据到什么地方结束 默认为页数*页码
2.制作分页按钮
createBtns: function (pagecount, page) {//分页总页数 当前页
var tempStr = "",currentPage = pagecount / tempmodel.pageNum,DZpagetotal = parseInt(currentPage),DZstr='';//currentPage 总条数（不取整） DZpagetotal 总条数（取整）
if (currentPage > DZpagetotal) {DZstr = DZpagetotal + 1;} else {DZstr = DZpagetotal;}
if (page > 1) {
tempStr += "<a class='btn first' data-page = '1'>首页</a>";
tempStr += "<a class='btn prepage' data-page = " + (page - 1) + ">上一页</a>"
}
if (currentPage > 7) {
if (tempmodel.page >= 5 ) {
tempStr += "<a class='btn page" + 1 + "' data-page = " + (1) + "><span>" + 1 + "</span></a>";
tempStr += "<span class='pagespan'>" + '...' + "</span>";
var indexstr = tempmodel.page;
var indexs='';
if(tempmodel.page <= DZstr-2){
indexs = [indexstr - 2, indexstr - 1, indexstr, indexstr + 1, indexstr + 2];
}else if(tempmodel.page <= DZstr-1){
indexs = [indexstr - 3,indexstr - 2, indexstr - 1, indexstr, indexstr + 1];
}else if(tempmodel.page <= DZstr){
indexs = [indexstr - 4,indexstr - 3,indexstr - 2, indexstr - 1, indexstr];
}
for (var k = 0; k < indexs.length; k++) {
tempStr += "<a class='btn page" + indexs[k] + "' data-page = " + (indexs[k]) + "><span>" + indexs[k] + "</span></a>";
}
if(tempmodel.page <= DZstr - 3){
tempStr += "<span class='pagespan'>" + '...' + "</span>";
tempStr += "<a class='btn page" + DZstr + "' data-page = " + (DZstr) + "><span>" + DZstr + "</span></a>";
}
}
else {
for (var pageIndex = 1; pageIndex <= 5; pageIndex++) {
tempStr += "<a class='btn page" + pageIndex + "' data-page = " + (pageIndex) + "><span>" + pageIndex + "</span></a>";
}
tempStr += "<span class='pagespan'>" + '...' + "</span>";
tempStr += "<a class='btn page" + DZstr + "' data-page = " + (DZstr) + "><span>" + DZstr + "</span></a>";
}
} else {
for (var pageIndex = 1; pageIndex < currentPage + 1; pageIndex++) {
tempStr += "<a class='btn page" + pageIndex + "' data-page = " + (pageIndex) + "><span>" + pageIndex + "</span></a>";
}
}
if (page < currentPage) {
tempStr += "<a class='btn nextpage' data-page = " + (page + 1) + ">下一页</a>";
tempStr += "<a class='btn last' data-page = " + (DZstr) + ">尾页</a>";
}
document.getElementById("pagebarcon").innerHTML = tempStr;
},
3.点击分页按钮触发事件
bindClick: function () {
var totolImgPage = tempmodel.pagecount/ tempmodel.pageNum+1;
// 设置首页、末页、上一页、下一页的点击事件
var buttonArr = ['first', 'last', 'prepage', 'nextpage'];
for (var j in buttonArr) {
var $sigdom ="."+ buttonArr[j];
$('body').delegate($sigdom, 'click', function () {
var data = $(this).data('page');//获取当前按钮跳转的页数
tempmodel.page=data;
tempmodel.ctDataList = [];
tempmodel.ctDataList = tempmodel.pageDataFn(tempmodel.pageNum, data, tempmodel.ctData);//对页面进行分页
tempmodel.createBtns(tempmodel.pagecount, tempmodel.page);
$("#pagebarcon .btn").removeClass("attr");
$('.page' + data).addClass("attr");
})
}
for (var k = 1; k <= totolImgPage; k++) {
var $singleDom = '.page' + k;
$('body').delegate($singleDom, 'click', function () {
var data = $(this).data('page');
tempmodel.page=data;
tempmodel.ctDataList = [];
tempmodel.ctDataList = tempmodel.pageDataFn(tempmodel.pageNum, data, tempmodel.ctData);//对页面进行分页
tempmodel.createBtns(tempmodel.pagecount,data);
$("#pagebarcon .btn").removeClass("attr");
$('.page' + data).addClass("attr");
})
}
},
废话不多说，上才（代）艺（码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页功能</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body ms-controller="hzbox" class="ms-controller">
<table>
<thead>
<tr>
<td ms-repeat-el="headList">{{el}}</td>
</tr>
</thead>
<tbody id="dzBody">
<tr ms-repeat-item="ctDataList">
<td>{{item.index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.number}}</td>
<td>{{item.money}}</td>
</tr>
</tbody>
</table>
<div id="pagecurrent">
共{{pagecount}}条数据
选择每页条数
<select ms-change="goCurrent(this.value)" class="sel">
<option ms-repeat-item="pagelist" ms-value="item">{{item}}</option>
</select>
<div id="pagebarcon" ms-if="pagecount>pageNum"></div>
</div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/avalon1.47.js"></script>
<script>
var tempmodel = avalon.define({
$id: "hzbox",
pagecount: "",//总条数
pagelist: [10, 20, 30, 50, 100],
page: 1,
pageNum: 10,//默认展示10条
headList: ["序号", "id", "名称", "数量", "金额"],
ctData: [
{index:1,id: 1001, name: "计算机", number: 1, money: 5},
{index:2,id: 1002, name: "笔记本", number: 5, money: 5},
{index:3,id: 1003, name: "台式机", number: 1, money: 123},
{index:4,id: 1004, name: "电脑", number: 7, money: 5},
{index:5,id: 1005, name: "ipad", number: 1, money: 5},
{index:6,id: 1006, name: "华为", number: 9, money: 5},
{index:7,id: 1007, name: "诺基亚", number: 4, money: 5},
{index:12,id: 1012, name: "电子管", number: 5, money: 3333},
{index:6,id: 1006, name: "华为", number: 9, money: 5},
{index:7,id: 1007, name: "诺基亚", number: 4, money: 5},
{index:8,id: 1008, name: "飞利浦", number: 3, money: 1},
{index:9,id: 1009, name: "海尔", number: 1, money: 111},
{index:10,id: 1010, name: "电信", number: 4, money: 5},
{index:11,id: 1011, name: "水杯", number: 1, money: 5},
{index:12,id: 1012, name: "电子管", number: 5, money: 3333},
{index:13,id: 1013, name: "灯管", number: 1, money: 5}
],//原数组
ctDataList: [],//页面展示数组
InitWigetData: function () {
tempmodel.getLists()
},
pageDataFn: function (pageNum, page, data) {//条数 当前页 原数组
var pagedata = [];
var start = (pageNum * page) - pageNum;
var end = pageNum * page;
end = end > data.length ? data.length : end;
for (let i = start; i < end; i++) {
pagedata.push(data[i])
}
return pagedata;
},
createBtns: function (pagecount, page) {//分页总页数 当前页
var tempStr = "";
var currentPage = pagecount / tempmodel.pageNum;
var DZpagetotal = parseInt(currentPage);var DZstr='';
if (currentPage > DZpagetotal) {DZstr = DZpagetotal + 1;} else {DZstr = DZpagetotal;}
if (page > 1) {
tempStr += "<a class='btn first' data-page = '1'>首页</a>";
tempStr += "<a class='btn prepage' data-page = " + (page - 1) + ">上一页</a>"
}
if (currentPage > 7) {
if (tempmodel.page >= 5 ) {
tempStr += "<a class='btn page" + 1 + "' data-page = " + (1) + "><span>" + 1 + "</span></a>";
tempStr += "<span class='pagespan'>" + '...' + "</span>";
var indexstr = tempmodel.page;
var indexs='';
if(tempmodel.page <= DZstr-2){
indexs = [indexstr - 2, indexstr - 1, indexstr, indexstr + 1, indexstr + 2];
}else if(tempmodel.page <= DZstr-1){
indexs = [indexstr - 3,indexstr - 2, indexstr - 1, indexstr, indexstr + 1];
}else if(tempmodel.page <= DZstr){
indexs = [indexstr - 4,indexstr - 3,indexstr - 2, indexstr - 1, indexstr];
}
for (var k = 0; k < indexs.length; k++) {
tempStr += "<a class='btn page" + indexs[k] + "' data-page = " + (indexs[k]) + "><span>" + indexs[k] + "</span></a>";
}
if(tempmodel.page <= DZstr - 3){
tempStr += "<span class='pagespan'>" + '...' + "</span>";
tempStr += "<a class='btn page" + DZstr + "' data-page = " + (DZstr) + "><span>" + DZstr + "</span></a>";
}
}
else {
for (var pageIndex = 1; pageIndex <= 5; pageIndex++) {
tempStr += "<a class='btn page" + pageIndex + "' data-page = " + (pageIndex) + "><span>" + pageIndex + "</span></a>";
}
tempStr += "<span class='pagespan'>" + '...' + "</span>";
tempStr += "<a class='btn page" + DZstr + "' data-page = " + (DZstr) + "><span>" + DZstr + "</span></a>";
}
} else {
for (var pageIndex = 1; pageIndex < currentPage + 1; pageIndex++) {
tempStr += "<a class='btn page" + pageIndex + "' data-page = " + (pageIndex) + "><span>" + pageIndex + "</span></a>";
}
}
if (page < currentPage) {
tempStr += "<a class='btn nextpage' data-page = " + (page + 1) + ">下一页</a>";
tempStr += "<a class='btn last' data-page = " + (DZstr) + ">尾页</a>";
}
document.getElementById("pagebarcon").innerHTML = tempStr;
},
bindClick: function () {
var totolImgPage = tempmodel.pagecount/ tempmodel.pageNum+1;
// 设置首页、末页、上一页、下一页的点击事件
var buttonArr = ['first', 'last', 'prepage', 'nextpage'];
for (var j in buttonArr) {
var $sigdom ="."+ buttonArr[j];
$('body').delegate($sigdom, 'click', function () {
var data = $(this).data('page');//获取当前按钮跳转的页数
tempmodel.page=data;
tempmodel.ctDataList = [];
tempmodel.ctDataList = tempmodel.pageDataFn(tempmodel.pageNum, data, tempmodel.ctData);//对页面进行分页
tempmodel.createBtns(tempmodel.pagecount, tempmodel.page);
$("#pagebarcon .btn").removeClass("attr");
$('.page' + data).addClass("attr");
})
}
for (var k = 1; k <= totolImgPage; k++) {
var $singleDom = '.page' + k;
$('body').delegate($singleDom, 'click', function () {
var data = $(this).data('page');
tempmodel.page=data;
tempmodel.ctDataList = [];
tempmodel.ctDataList = tempmodel.pageDataFn(tempmodel.pageNum, data, tempmodel.ctData);//对页面进行分页
tempmodel.createBtns(tempmodel.pagecount,data);
$("#pagebarcon .btn").removeClass("attr");
$('.page' + data).addClass("attr");
})
}
},
goCurrent: function (item) {
tempmodel.pageNum = item;
tempmodel.page=1;
tempmodel.getLists();
},
getLists: function () {
tempmodel.pagecount = tempmodel.ctData.length;
tempmodel.ctDataList=[];
tempmodel.ctDataList = tempmodel.pageDataFn(tempmodel.pageNum, tempmodel.page, tempmodel.ctData);
tempmodel.createBtns(tempmodel.pagecount, tempmodel.page);
tempmodel.bindClick();
if(tempmodel.page==1){
$("#pagebarcon .page1").addClass("attr")
}
}
});
avalon.ready(function () {
tempmodel.InitWigetData();
});
</script>
</html>
css样式
* {margin:0;padding:0;}
table {width:1000px;margin:0 auto;text-align:center;border-collapse:collapse;border-spacing:0;border:0}
table tr td {border:1px solid #eee;height:45px;line-height:45px;}
.ms-controller {visibility:hidden}
#pagecurrent {width:1000px;margin:0 auto;text-align:right;color:#333;padding:20px 0px 30px;box-sizing:border-box;height:26px;line-height:26px;display:flex;justify-content:flex-end;font-size:13px;}
#pagebarcon {display:inline-block}
#pagebarcon a {width:32px;height:26px;margin-left:6px;display:inline;text-align:center;line-height:26px;background:#eee;padding:5px 12px;cursor:pointer;}
#pagecurrent .sel {width:60px;height:26px;line-height:26px;margin-left:5px;}
#pagebarcon a:first-child {margin-left:10px;}
.btn.nextpage,.btn.last {height:26px;padding:4.5px 6px;box-sizing:border-box;min-width:55px;margin-left:5px;background:#eee;cursor:pointer;}
.btn.last {margin-left:5px;padding-left:12px;padding-right:12px;}
#pagebarcon a.attr {background:#409EFF;color:#fff}
table {margin-top:20px;border:1px solid #ebeef5}
table tr td {border:0;}
table tbody tr:nth-child(2n) {background:#fafafa;}
table tr {border-bottom:1px solid #ebeef5}
table tbody tr:hover {background:#f5f7fa;}
.pagespan{padding:0 3px 0 8px;position: relative;top:-4px;font-weight:700;}
效果截图：
写在最后
功能虽小，做起来却很容易踩坑，希望对您有所帮助！如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏，毕竟原创不易；如果您觉得这个功能有需要改进的地方也希望留下您的宝贵意见！
7078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
