• 实现表格分页


    由于工作需要,经常在开发中需要实现表格分页这种特效,目的的为提升用户体验,减少大数据渲染数量。

    分页的分两种,一种是要和服务器交互,另一种是一次性拿到所有数据,在本地做分页处理。本次主要谈论第二种。

    分页原理很简单,无非就是数组切片。

    最关键是这两句:

    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>
    

      

  • 相关阅读:
    使用matplotlib绘制常用图表(3)其他图表绘制
    python简单爬虫
    使用matplotlib绘制常用图表(2)常用图标设置
    一个GISer的使命
    SQL2008″Unable to read the list of previously registered servers on this system”
    Eclipse语言包安装
    eclipse查看JDK源码
    Eclipse中设置javadoc中文帮助文档
    GDI+处理图像时出现内存不足的问题
    利用github搭建私人maven仓库
  • 原文地址:https://www.cnblogs.com/CDtao/p/7281444.html
Copyright © 2020-2023  润新知