由于工作需要,经常在开发中需要实现表格分页这种特效,目的的为提升用户体验,减少大数据渲染数量。
分页的分两种,一种是要和服务器交互,另一种是一次性拿到所有数据,在本地做分页处理。本次主要谈论第二种。
分页原理很简单,无非就是数组切片。
最关键是这两句:
var startRow = (currentPage - 1) * pageSize; //currentPage 为当前页,pageSize为每页显示的数据量
var endRow = currentPage * pageSize -1;
比如我们要将数据每页5条展示,那么第一页的开始行就为 (1-1)* 5 = 0;结束行就为 1 * 5 - 1 = 4 (数组下标从0开始),依次类推,
第二页开始行就为 (2-1)* 5 = 5;结束行就为 2 * 5 - 1 = 9
找到我们需要显示的行的范围然后进行渲染操作
下面是一个简单的表格分页效果
本文仅做个人学习记录之用,如有错误之处,还请网页纠正,谢谢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.css" rel="stylesheet"> --> <style> *{ margin: 0; padding: 0; } ul li{ display: inline-block; margin-right: 10px; } </style> </head> <body > <div style=" 80%;margin:0 auto"> <table style="text-align: center;border-collapse:collapse; 100%" border="1" > <thead> <tr> <th>ID</th> <th>用户名</th> <th>年龄</th> <th>毕业学校</th> <th>备注</th> </tr> </thead> <tbody id="listbox"> </tbody> </table> <nav style="100%;margin-top:20px";> <ul style="100%;display:flex;justify-content:space-between" > <li id="last">上一页</li> <li id="next">下一页</li> <li id="">共<span id='pages'></span>页</li> <li>共<span id="num"></span></li> <li>当前第<span id="currentNum" ></span>页</li> <li> <select name="" id="select" > <option value="1">1</option> <option value="3" selected = "selected">3</option> <option value="5" >5</option> <option value="10">10</option> <option value="15">15</option> </select></li> <li id="first">首页</li> <li id="end">尾页</li> </ul> </nav> </div> <script> var data = { rows: [ { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, { Id: 6, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 7, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 8, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 9, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 10, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, { Id: 11, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 12, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 13, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 14, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 15, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, { Id: 16, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' }, { Id: 17, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' }, { Id: 18, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' }, { Id: 19, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' }, { Id: 20, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' }, ], }; var current = 1; function pageInit(currentPage,pagesize){ current = currentPage;//将当前页存储全局变量 pageCount = Math.ceil(data.rows.length / pagesize);//一共分多少页 currentNum.innerHTML = currentPage; num.innerHTML = data.rows.length +"条"; pages.innerHTML = pageCount; var startRow = (currentPage - 1) * pagesize;//开始显示的行 var endRow = currentPage * pagesize - 1;//结束显示的行 var endRow = (endRow > data.rows.length) ? data.rows.length : endRow;//如果结束行数大于总数目,显示总数目,否则结束行 var html = ""; for(var i = 0; i < data.rows.length; i++){ if(i >= startRow && i <= endRow ){//通过间隔分隔数组 html += "<tr> <td>"+data.rows[i].Id+"</td> <td>"+data.rows[i].Age+"</td> <td>"+data.rows[i].School+"</td> <td>"+data.rows[i].Name+"</td> <td>"+data.rows[i].Remark+"</td> </tr>" } } listbox.innerHTML = html; } select.onchange = function(ev){ pageInit(1,this.value) } first.onclick = function(){ pageInit(1,select.value) } end.onclick = function(){ pageInit(pageCount,select.value) } next.onclick = function(){ var curr = current +1; if(curr>pageCount){ return } pageInit(curr,select.value) } last.onclick =function(){ var curr = current - 1; if(curr<1){ return } pageInit(curr,select.value) } pageInit(1,3) </script> </body> </html>