记录我学习JS的记录
都是自己人，分页功能的学习也是为了方便用户的一个功能，在网页进行大量数据展示的时候，可以通过分页技术来将数据分成若干页面展示每次请求查询，不需要查询所有，通过定制页码或者别的方式，只需要查询数据的一 部分，将数据看作一本书，通过页码可以跳转可见数据，直到找到自己想要的就OK啦 是不是很方便呢 下面是效果图
样式因人而异，我的样式做的不是很好 这边主要是实现JS功能
咱！直接上代码
HTML：
<table border="1" cellspacing="0" cellpadding="20" class="table"> <thead> <tr> <td><input type="checkbox" onclick="all_choose()" id="all"></td> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> <div class="bottom"> <select class="selects" onchange="(event)"> <option value="5">每页5条</option> <option value="10">每页10条</option> <option value="15">每页15条</option> <option value="20">每页20条</option> </select> <div>共</div> <div>23</div> <div>条</div> <div class="paging"> </div> <div class="inpt" style="display: flex;"> <span>前往第</span> <input type="number" value="" style="width: 20%; margin: 0 5px;" id="go"> 页 </div> </div> </div>
CSS样式：
*{ margin: 0; padding: 0; } .bottom { margin-top: 20px; display: flex; align-items: center; } .bottom div { margin-left: 5px; } .paging { display: flex; align-items: center; } .paging div { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; text-align: center; line-height: 15px; border: 1px solid #EEEEEE; border-radius: 6px; } .paging span { display: block; width: 30px; height: 30px; text-align: center; line-height: 15px; border: 1px solid #EEEEEE; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin: 0 6px; } .table th, td { width: 23vh; text-align: center; } .selects { width: 30%; }
下面就是最重要的JS部分：
首先要获取初始数据（用数组包对象的形式） 比如你要填入的信息 这边就写一下常用的 id代表序号 name代表名字 age代表年龄 address代表地点
let data = [{ id: 1, name: '张三', age: '18', address: '河南' }, { id: 2, name: '张三', age: '18', address: '河南' }, { id: 3, name: '张三', age: '18', address: '河南' }, { id: 4, name: '张三', age: '18', address: '河南' }, { id: 5, name: '张三', age: '18', address: '河南' }, { id: 6, name: '张三', age: '18', address: '河南' }, { id: 7, name: '张三', age: '18', address: '河南' }, { id: 8, name: '张三', age: '18', address: '河南' }, { id: 9, name: '张三', age: '18', address: '河南' }, { id: 10, name: '张三', age: '18', address: '河南' }, { id: 11, name: '张三', age: '18', address: '河南' }, { id: 12, name: '张三', age: '18', address: '河南' }, { id: 13, name: '张三', age: '18', address: '河南' }, { id: 14, name: '张三', age: '18', address: '河南' }, { id: 15, name: '张三', age: '18', address: '河南' }, { id: 16, name: '张三', age: '18', address: '河南' }, { id: 17, name: '张三', age: '18', address: '河南' }, { id: 18, name: '张三', age: '18', address: '河南' }, { id: 19, name: '张三', age: '18', address: '河南' }, { id: 20, name: '张三', age: '18', address: '河南' }, { id: 21, name: '张三', age: '18', address: '河南' }, { id: 22, name: '张三', age: '18', address: '河南' }, { id: 23, name: '张三', age: '18', address: '河南' }, ] let tbody = document.getElementById('tbody'); let page = 5; //一页显示5行数据 let num = 0; //显示的是在第几页 因为是下标计算 第一页就是0 以此类推 let selects = document.getElementsByClassName('selects')[0]; //获取初始数据 let c = 0; let a = 0; //首次需要先渲染一次哦！！
其次开始渲染页面
renders(); function renders() { let str = ''; for (let i = num * page; i < (num + 1) * page; i++) { if (data[i]) { // console.log(data); str += `<tr> <td> <input type="checkbox" class="one_choose" onclick="checkone()"> </td> <td>${data[i].id}</td> <td>${data[i].name}</td> <td>${data[i].age}</td> <td>${data[i].address}</td> </tr>` } } tbody.innerHTML = str; render_paging(); } //渲染
然后还要渲染底部导航页面左右的页面
function render_paging() { let str = `<div onclick="left()"> < </div>`; let count = Math.ceil(data.length / page); c = count; for (let i = 0; i < count; i++) { str += `<span style="background-color:${num == i ? 'gray' : '#EEEEEE'}" onclick="gogo_througth(${i})" class="go_througth">${i+1}</span>`; } str += `<div onclick="right()">></div>`; document.getElementsByClassName('paging')[0].innerHTML = str; } //渲染左右按钮和页数
接下来是给左右图标添加绑定事件
function right() { let count = Math.ceil(data.length / page); if (num < count - 1) { num++; all.checked = false; renders(); } else { alert('我也是有底线的哦~'); } } //右按钮
function left() { if (num > 0) { num--; all.checked = false; renders(); } else { alert('都第一页了你还要干嘛？'); } } //左按钮
给下拉选项框添加onchange事件 以及全选和单选的实现
selects.addEventListener("change", function() { page = this.value num = 0; renders() }) //给下拉框添加onchange事件 let all = document.getElementById('all'); function all_choose() { let one_choose = document.getElementsByClassName('one_choose'); let len = one_choose.length; // console.log(all.checked); // console.log(one_choose); for (let i = 0; i < len; i++) { //当全选按钮为true时，全部按钮都为true，否则相反 if (all.checked == true) { one_choose[i].checked = true; } else { one_choose[i].checked = false; } } } //实现全选按钮函数 function checkone() { let one_choose = document.getElementsByClassName('one_choose'); let len = one_choose.length; a = 0 //当单选按钮都为true时，全选按钮也为true，否则为false for (let i = 0; i < len; i++) { if (one_choose[i].checked == true) { a++; // console.log(all); if (a == page) { all.checked = true; } else { all.checked = false; } } } } //实现单选选按钮函数
后面结尾在作业简单的优化 比如给input绑定一下回车事件等等
let go = document.getElementById('go'); let go_througth = document.getElementsByClassName('go_througth'); function gogo_througth(i) { all.checked = false; console.log(i); // one_choose[i].checked = false; num = i; renders(); } //页数数字点击自动跳转 go.addEventListener('keydown', function(e) { // all.checked = false; // 判断是否按下了回车键 if (e.keyCode === 13) { // 在这里处理回车事件 if (go.value != parseInt(go.value)) { go.value = parseInt(go.value) console.log(go.value); } if (go.value == parseInt(go.value)) { if (go.value <= c && go.value > 0) { // console.log(go.value); num = go.value - 1; all.checked = false; renders(); } else { alert('你选的页面不对'); go.value = ''; } } } }); //input绑定回车事件
以上就是JS实现简单分页功能 本人也还在学习阶段 有大佬看到的话可以提出一些优化建议和指导
