实现表格分页
2017-08-03 19:14 库奇—— 阅读(702) 评论(0) 编辑 收藏 举报由于工作需要，经常在开发中需要实现表格分页这种特效，目的的为提升用户体验，减少大数据渲染数量。
分页的分两种，一种是要和服务器交互，另一种是一次性拿到所有数据，在本地做分页处理。本次主要谈论第二种。
分页原理很简单，无非就是数组切片。
最关键是这两句：
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="width: 80%;margin:0 auto">
<table style="text-align: center;border-collapse:collapse; width: 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="width:100%;margin-top:20px";>
<ul style="width: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>
