当后端一次性返回200+数据如何进行分页处理（新）

当后端一次性返回100条&＃43;数据前端如何进行处理&＃xff1f;
前端如何将接口返回数据转化成符合前端业务逻辑的数据结构&＃xff1f;
带着这些问题看文章&＃xff0c;希望对你有所帮助&＃xff01;

1. 应用场景
2. 思路分析
3. 代码块分析
4. 具体实现代码

应用场景

当后端一次性返回100条&＃43;数据前端如何处理&＃xff1f;
当后端设计表结构时未设计分页字段&＃xff0c;或者采用第三方接口一次性返回所有数据 要求前端实现分页功能&＃xff1f;

思路分析

实现需求之前思考这些问题
1.前端实现分页功能首先要搞清楚实现分页功能需要哪些参数&＃xff1f;如何去做&＃xff1f;&＃xff1f;
2.如何对接口返回的数据进行处理&＃xff1f;后端一次性返回100条数据如何进行处理&＃xff1f;

问题解答
1.具体实现分页功能需要的参数有&＃xff1a;
pagecount 总页数
page 当前页数
pageNum 页面默认展示数据的条数
pagelist 页面展示数据条数的数组
ctDataList 存放页面展示数据的数组
ctData 存放后端返回的数组

2.页面展示的数据一般默认都是10条&＃xff0c;通过函数封装pageDataFn得到新数组ctDataList用于存放页面展示的数组&＃xff1b; 至于函数如何封装请仔细阅读代码块分析&＃xff01;
如果后端一次性返回100条数据&＃xff0c;通过函数封装也能轻松实现 so easy&＃xff01;&＃xff01;&＃xff01;

代码块分析

1.将接口返回数据进行简单处理

pageDataFn: function (pageNum, page, data) {//条数 当前页 原数组var pagedata &＃61; [];var start &＃61; (pageNum * page) - pageNum;var end &＃61; pageNum * page;end &＃61; end > data.length ? data.length : end;for (let i &＃61; start; i

2.制作分页按钮

createBtns: function (pagecount, page) {//分页总页数 当前页var tempStr &＃61; "",currentPage &＃61; pagecount / tempmodel.pageNum,DZpagetotal &＃61; parseInt(currentPage),DZstr&＃61;&＃39;&＃39;;//currentPage 总条数&＃xff08;不取整&＃xff09; DZpagetotal 总条数&＃xff08;取整&＃xff09;if (currentPage > DZpagetotal) {DZstr &＃61; DZpagetotal &＃43; 1;} else {DZstr &＃61; DZpagetotal;}if (page > 1) {tempStr &＃43;&＃61; "首页";tempStr &＃43;&＃61; "上一页"}if (currentPage > 7) {if (tempmodel.page >&＃61; 5 ) {tempStr &＃43;&＃61; "" &＃43; 1 &＃43; "";tempStr &＃43;&＃61; "" &＃43; &＃39;...&＃39; &＃43; "";var indexstr &＃61; tempmodel.page;var indexs&＃61;&＃39;&＃39;;if(tempmodel.page <&＃61; DZstr-2){indexs &＃61; [indexstr - 2, indexstr - 1, indexstr, indexstr &＃43; 1, indexstr &＃43; 2];}else if(tempmodel.page <&＃61; DZstr-1){indexs &＃61; [indexstr - 3,indexstr - 2, indexstr - 1, indexstr, indexstr &＃43; 1];}else if(tempmodel.page <&＃61; DZstr){indexs &＃61; [indexstr - 4,indexstr - 3,indexstr - 2, indexstr - 1, indexstr];}for (var k &＃61; 0; k " &＃43; indexs[k] &＃43; "";}if(tempmodel.page <&＃61; DZstr - 3){tempStr &＃43;&＃61; "" &＃43; &＃39;...&＃39; &＃43; "";tempStr &＃43;&＃61; "" &＃43; DZstr &＃43; "";}}else {for (var pageIndex &＃61; 1; pageIndex <&＃61; 5; pageIndex&＃43;&＃43;) {tempStr &＃43;&＃61; "" &＃43; pageIndex &＃43; "";}tempStr &＃43;&＃61; "" &＃43; &＃39;...&＃39; &＃43; "";tempStr &＃43;&＃61; "" &＃43; DZstr &＃43; "";}} else {for (var pageIndex &＃61; 1; pageIndex " &＃43; pageIndex &＃43; "";}}if (page 下一页";tempStr &＃43;&＃61; "尾页";}document.getElementById("pagebarcon").innerHTML &＃61; tempStr;},


3.点击分页按钮触发事件

bindClick: function () {var totolImgPage &＃61; tempmodel.pagecount/ tempmodel.pageNum&＃43;1;// 设置首页、末页、上一页、下一页的点击事件var buttonArr &＃61; [&＃39;first&＃39;, &＃39;last&＃39;, &＃39;prepage&＃39;, &＃39;nextpage&＃39;];for (var j in buttonArr) {var $sigdom &＃61;"."&＃43; buttonArr[j];$(&＃39;body&＃39;).delegate($sigdom, &＃39;click&＃39;, function () {var data &＃61; $(this).data(&＃39;page&＃39;);//获取当前按钮跳转的页数tempmodel.page&＃61;data;tempmodel.ctDataList &＃61; [];tempmodel.ctDataList &＃61; tempmodel.pageDataFn(tempmodel.pageNum, data, tempmodel.ctData);//对页面进行分页tempmodel.createBtns(tempmodel.pagecount, tempmodel.page);$("#pagebarcon .btn").removeClass("attr");$(&＃39;.page&＃39; &＃43; data).addClass("attr");})}for (var k &＃61; 1; k <&＃61; totolImgPage; k&＃43;&＃43;) {var $singleDom &＃61; &＃39;.page&＃39; &＃43; k;$(&＃39;body&＃39;).delegate($singleDom, &＃39;click&＃39;, function () {var data &＃61; $(this).data(&＃39;page&＃39;);tempmodel.page&＃61;data;tempmodel.ctDataList &＃61; [];tempmodel.ctDataList &＃61; tempmodel.pageDataFn(tempmodel.pageNum, data, tempmodel.ctData);//对页面进行分页tempmodel.createBtns(tempmodel.pagecount,data);$("#pagebarcon .btn").removeClass("attr");$(&＃39;.page&＃39; &＃43; data).addClass("attr");})}},


废话不多说&＃xff0c;上才&＃xff08;代&＃xff09;艺&＃xff08;码&＃xff09;

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;}


效果截图&＃xff1a;

写在最后

功能虽小&＃xff0c;做起来却很容易踩坑&＃xff0c;希望对您有所帮助&＃xff01;如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏&＃xff0c;毕竟原创不易&＃xff1b;如果您觉得这个功能有需要改进的地方也希望留下您的宝贵意见&＃xff01;