<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery.min.js"></script> <title></title> </head> <body> <style type="text/css"> #button{ display: flex; } </style> <div id="list"> </div> <div id="button"> <button onclick="up()">上一页</button> <div id="but"> </div> <button onclick="bottom()">下一页</button> </div> <script type="text/javascript"> let data = [{ //模拟数据（假设这就是从后台请求过来的数据） name: "沈阳市", value: ["123.429092", "41.796768"], }, { name: "长春市", value: ["125.324501", "43.886841"], }, { name: "哈尔滨市", value: ["126.642464", "45.756966"], }, { name: "北京市", value: ["116.405289", "39.904987"], }, { name: "天津市", value: ["117.190186", "39.125595"], }, { name: "呼和浩特市", value: ["111.751990", "40.841490"], }, { name: "银川市", value: ["106.232480", "38.486440"], }, { name: "太原市", value: ["112.549248", "37.857014"], }, { name: "石家庄市", value: ["114.502464", "38.045475"], }, { name: "济南市", value: ["117.000923", "36.675808"], }, { name: "郑州市", value: ["113.665413", "34.757977"], }, { name: "西安市", value: ["108.948021", "34.263161"], }, { name: "武汉市", value: ["114.298569", "30.584354"], }, { name: "南京市", value: ["118.76741", "32.041546"], }, ] let page = { pageSize: 5, //每页显示多少数据 currentPage: 1, //初始页面 total: 0, //总共有多少条数据 }; let viewData = []; //页面要渲染的数据 function aa(){ page.total = data.length; //页面要显示的数据总条数 viewData = data.slice((page.currentPage - 1) * page.pageSize, page.pageSize + ((page.currentPage - 1) * page .pageSize)); //这里就是截取出来第一页的十条数据 // console.log(page.currentPage); let arr = ""; for (let i = 0; i < viewData.length; i++) { arr += '<div id="box">'+ viewData[i].name +'</div>' } let Pagecount = Math.ceil(data.length / page.pageSize); let three = ""; for (let i = 0; i < Pagecount; i++) { let is = i + 1; three += '<span onclick="previous_span(' + i + ')" style="width:2vw" class="span_iner">' + is + '</span> '; } $("#but").html(three) $("#list").html(arr) } aa() // 上一页 function up(){ if(page.currentPage > 1){ page.currentPage--; console.log(page.currentPage); aa() }else if (page.currentPage == 1) { alert('第一页') } } // 下一页 function bottom(){ if (page.currentPage != Math.ceil(page.total / page.pageSize)) { //判断当前页面不等于总条数除于每页多少条 page.currentPage++; aa() }else if(page.currentPage == Math.ceil(page.total / page.pageSize)){ //判断当前页面等于总条数除于每页多少条 alert('最后一页') } } // 点击哪个数字跳到相应的页数 function previous_span(i) { let span_iner = document.getElementsByClassName('span_iner'); page.currentPage = i + 1; aa() } </script> </body> </html>
感谢您的收看，给您带来方便是我得荣幸。
