来喽来喽，有点迷迷的分页功能他来了！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div id="bt"> <div id="bt1"> <p>序号</p> </div> <div id="bt2"> <p>姓名</p> </div> <div id="bt3"> <p>现所处阶段</p> </div> <div id="bt4"> <p>性别</p> </div> </div> <div id="matter"> <div id="nrone"> <div id="one1"> <p>1</p> </div> <div id="one2"> <p>安菲娅</p> </div> <div id="one3"> <p>第二阶段</p> </div> <div id="one4"> <p>18</p> </div> </div> </div> <div id="dbu"> <div id="dqy"> <p>当前 1 / 7 页 共 32 条</p> </div> <button id="sye" onclick="lastPage()">上一页</button> <div id="ys"> <p>1</p> </div> <button id="xye" onclick="next()">下一页</button> <select id="below" onchange="beloww()"> <option value="5" selected>五条/页</option> <option value="10">十条/页</option> <option value="20">二十条/页</option> </select> <input id="importt" type="number" placeholder="请输入想去页数"/> </div> <script src="js/index.js"></script> </body> </html>
#bt{ width: 60%; height: 60px; background-color: rgba(68, 137, 206, 0.2); } #matter{ width: 60%; height: 300px; background-color: rgba(180, 180, 180, 0.3); overflow: scroll; } #nrone{ width: 100%; height: 60px; background-color: rgba(74, 0, 112, 0.1); } #bt1{ width: 25%; height: 100%; float: left; } #bt1 p{ text-align: center; line-height: 5px; font-size: 25px; } #bt2{ width: 25%; height: 100%; float: left; } #bt2 p{ text-align: center; line-height: 5px; font-size: 25px; } #bt3{ width: 25%; height: 100%; float: left; } #bt3 p{ text-align: center; line-height: 5px; font-size: 25px; } #bt4{ width: 25%; height: 100%; float: left; } #bt4 p{ text-align: center; line-height: 5px; font-size: 25px; } #one1{ width: 25%; height: 100%; float: left; } #one1 p{ text-align: center; font-size: 20px; } #one2{ width: 25%; height: 100%; float: left; } #one2 p{ text-align: center; font-size: 20px; } #one3{ width: 25%; height: 100%; float: left; } #one3 p{ text-align: center; font-size: 20px; } #one4{ width: 25%; height: 100%; float: left; } #one4 p{ text-align: center; font-size: 20px; } #sye{ width: 60px; height: 30px; float: left; cursor: pointer; } #dbu{ width: 60%; height: 30px; background-color: lightgray; } #ys{ width: 130px; height: 30px; background-color: rgba(99, 99, 148, 0.2); float: left; } #ys p{ text-align: center; line-height: 2px; margin-left: 8px; } #xye{ width: 60px; height: 30px; float: left; cursor: pointer; } #below{ width: 80px; height: 100%; } #importt{ width: 110px; height: 80%; } #dqy{ width: 100px; height: 100%; float: left; } #dqy p{ font-size: 10px; }
这是基本样式；
//声明一个全局变量 strip 变量值为5;(显示数据条数) let strip = 5; //声明一个全局变量 k 变量值为0;(表示当前页) let k = 0; //声明一个全局变量 kg; let kg; //声明一个全局变量 pagec; let pagec; //获取HTML的内容框matter; let matter = document.getElementById('matter'); //获取HTML的input输入框importt; let importt = document.getElementById('importt'); //获取HTML的select下拉框below; //let below = document.getElementById('below'); //声明new XMLHttpRequest; let gk = new XMLHttpRequest(); //使用 open 方法指定要请求的地址、类型和方式; gk.open('get', 'index.json', true); //使用send方法发送请求; gk.send(); //绑定 onreadystatechange 事件; gk.onreadystatechange = function() { if (gk.readyState == 4 && gk.status == 200) { let text = gk.responseText; console.log(text); let data = JSON.parse(text); console.log(data); kg = data; vray(kg); } } //判断 readyState 和 status 的状态; // 接收数据通过 json 转换使用，是用json将数据转化为js可用的形式; //调用vray()渲染 //渲染函数 函数名为vray; //创建一个函数 function vray(data) { pagec = Math.ceil(data.length / strip); let str = ""; let strr = ""; let strrr = ""; for (let i = (k * strip); i < (k + 1) * strip; i++) { if (data[i] != undefined) { str += `<div id="nrone"> <div id="one1"> <p>${i+1}</p> </div> <div id="one2"> <p>${data[i].num}</p> </div> <div id="one3"> <p>${data[i].stage}</p> </div> <div id="one4"> <p>${data[i].year}</p> </div> </div>` } } for (let a = 0; a <= pagec - 1; a++) { strr += ` <p onclick="fn(${parseInt(a)})" style="float:left;color:${k==a?"red":"null"}">${a+1}</p> ` } strrr += `<p>当前 ${k+1}/ ${pagec} 页 共 32 条</p>` // onclick="fn(${parseInt(a)})" matter.innerHTML = str; ys.innerHTML = strr; dqy.innerHTML = strrr; } //声明一个空字符串; //for 循环(let i =(k*strip);i<(k+1)*strip;i++) //if判断(数据是否为undefined) //将自己创建的json文件与HTML内容拼接; //用innerHTHL给最外层的matter进行渲染; //给下一页按钮绑定点击事件 //创建函数 用onclick绑定 next //for循环 //if判断() //调用渲染函数 function next() { //for(let i=0;i<kg.length-1;i++){ if (k < pagec - 1) { k++; } //} vray(kg); } //给上一页按钮绑定点击事件 //创建函数 用onclick绑定 last //if判断(k>=0) //调用渲染函数 function lastPage() { if (k > 0) { k--; } vray(kg); } //给页码绑定点击事件 //创建函数 用onclick绑定(将a传过来) //让k=a //调用渲染函数 function fn(a) { k = a; vray(kg); } //给下拉框绑定onchange事件 function beloww() { let val = document.getElementById('below').value; strip = val; k = 0; // if(k>pagec-1){ // k-1 // } // console.log(k) vray(kg); } //创建一个函数 //声明一个变量让它的值等于下拉框的值 //调用渲染函数 //给input输入框绑定回车事件 onkeydown //创建一个函数 importt.onkeydown = function(event) { let val = document.getElementById('importt').value; let e = event || window.event; if (e.keyCode == 13) { console.log('我是回车') if (val <= pagec && val % 1 == 0 && val >= 0 && val != "") { k = val - 1; vray(kg); } else { alert("没有该页面"); } document.getElementById('importt').value = null; } } //声明一个变量让它的值等于输入框的值 //调用渲染函数 // && val%1 == 0 && val == "" && val == pagec-1
这是js里的执行操作；大家记得写json文件，我在这里就不写了，大家可以根据自己喜欢的数据来
制作。
我在分页里用的是回车事件，要记住一点，鼠标事件是直接绑定在js里的，如果在HTML里绑定
是无法获取的，
