js分页精讲

发布时间：2026/10/18 6:29:38

后端一次性返回一大堆数据时不要一次性全部渲染到页面只渲染当前这一页的数据减少 DOM 渲染压力页面不卡顿。分两种前端分页全部数据一次性拿到JS 自己切割分页、后端分页每次只请求当前页的数据最常用解决什么问题如果几百上千条数据一次性全部渲染到页面DOM 元素巨多页面加载慢、滚动卡顿一次性渲染大量 HTML占用内存高用户只看前几条后面大量数据完全没用浪费性能分页就是把列表切成一小块一小块一页 N 条只展示当前页。前端分页一次性拿到全部数组JS 截取数组渲染后端分页每次点页码向服务器请求【当前页】那一小段数据推荐项目用这个✅ 应用场景后台管理系统的表格列表用户管理、订单管理、商品列表最常见作业高频商品列表、文章列表、新闻列表大数据表格几十上百条数据小数据少于 10 条不用分页直接全部渲染就行。✅ 两种分页怎么写用 let、箭头函数符合你的习惯① 前端分页适合一次性拿到全部数据少量数据不用反复请求接口逻辑拿到完整数组用slice截取当前页需要的数据!-- HTML -- div classlist-box/div div classpage-box button idprev上一页/button span idpage-info/span button idnext下一页/button /div// 模拟后端返回的全部数据 let allData [ {name:数据1},{name:数据2},{name:数据3},{name:数据4}, {name:数据5},{name:数据6},{name:数据7},{name:数据8}, {name:数据9},{name:数据10},{name:数据11},{name:数据12} ] // 分页配置 let currentPage 1; // 当前页码 let pageSize 5; // 每页显示几条 // 渲染函数 let renderList (){ // 计算截取起始下标 let start (currentPage -1) * pageSize; let end currentPage * pageSize; // slice截取[start,end) let pageData allData.slice(start, end); // 拼接html let htmlStr ; pageData.forEach(item{ htmlStr div${item.name}/div }) document.querySelector(.list-box).innerHTML htmlStr; // 总页数 let totalPage Math.ceil(allData.length / pageSize) document.querySelector(#page-info).innerText ${currentPage}/${totalPage} } // 上一页 document.querySelector(#prev).addEventListener(click,(){ if(currentPage 1){ currentPage--; renderList() } }) // 下一页 document.querySelector(#next).addEventListener(click,(){ let totalPage Math.ceil(allData.length / pageSize) if(currentPage totalPage){ currentPage; renderList() } }) // 首次渲染 renderList()缺点如果有上万条数据一次性拿全部数据接口返回很慢不适合大数据。② 后端分页真实项目用作业必考核心不一次性拿全部数据每次切换页码把currentPage、pageSize传给后端接口后端只返回当前页的数据。参数page当前第几页limit一页多少条返回内容一般包含{ list: [], // 当前页数据 total: 12, // 总条数 page:1, limit:5 }let currentPage 1; let pageSize 5; let totalPage 0; // 请求接口拿当前页数据 let getList (){ // ajax请求把页码传给后端 fetch(/api/getList?page${currentPage}limit${pageSize}) .then(resres.json()) .then(res{ // res.list 当前页数据 let htmlStr ; res.list.forEach(item{ htmlStr div${item.name}/div }) document.querySelector(.list-box).innerHTML htmlStr; // 计算总页数 totalPage Math.ceil(res.total / pageSize) document.querySelector(#page-info).innerText ${currentPage}/${totalPage} }) } // 上一页 document.querySelector(#prev).addEventListener(click,(){ if(currentPage 1){ currentPage--; getList() } }) // 下一页 document.querySelector(#next).addEventListener(click,(){ if(currentPage totalPage){ currentPage; getList() } }) // 首次加载 getList()