项目需求, 要在前端做分页. 网上的插件不是很适合, 自己写了一个.
分页实现分为两种 1. 数据总数已知, 直接查出总数进行分页, 显示的时候是清空容器, 插入每页的内容
2. 数据总数未知, 一条条添加, 数据总数在变化, 分页方法是把总数隐藏, 显示部分, 但是这个需要 在插入一条数据的时候就执行一遍函数, 请大神指教 怎么改善. html 代码
- <!--creat by zhuangjunkun 2017-6-14-->
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <title>angular</title>
- <style type="text/CSS">
- .p-wrap{width: 800px;height: auto;margin: 0 auto;background: #000000;}
- .p-item{display: block;width: 50%;margin:0 auto;margin-bottom:10px; text-align: center;background: red;height: 40px;line-height: 40px;}
- </style>
- </head>
- <body>
- <div class='p-wrap'>
- <span class="p-item"> 测试 1</span>
- <span class="p-item"> 测试 2</span>
- <span class="p-item"> 测试 3</span>
- <span class="p-item"> 测试 4</span>
- <span class="p-item"> 测试 5</span>
- <span class="p-item"> 测试 6</span>
- <span class="p-item"> 测试 7</span>
- <span class="p-item"> 测试 8</span>
- <span class="p-item"> 测试 9</span>
- <span class="p-item"> 测试 10</span>
- <span class="p-item"> 测试 11</span>
- </div>
- <div style="text-align: center;">
- <button class="pre"> 上一页 </button>
- <span class="pageBox">1/1</span>
- <button class="aft"> 下一页 </button>
- </div>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
- <script type="text/javascript">
- // var h=$('.p-item').prop('outerHTML')
- // 分页
- // 显示容器 以及 每页显示条数
- // 参数: 外容器, 每页显示数目, 前后按钮, 页码显示, 页码显示容器
- /*type 参数 1,2 对应两种分页实现类型
- *current 此参数, 在类型为 2 时有效, current=2 则显示最后一页, 其他值则显示第一页
- *pWrap 容器
- *limit 每页显示数量
- *obj 数据对象
- *preBtn 上一页按钮
- *aftBtn 下一页按钮
- *pageBox 页码显示
- */
- function pagenation(type,current,pWrap,limit,obj,preBtn,aftBtn,pageBox){
- var pWrap=$(pWrap),
- itemList= pWrap.find(obj),
- preBtn=$(preBtn),
- aftBtn=$(aftBtn),
- currentPage=0,
- type=type,
- pageBox=$(pageBox),
- pLimit=parseInt(limit);
- // 数量小于 limit 不做处理
- if(itemList.length<=pLimit){
- return false;
- }
- // 页数向上取整
- var page=Math.ceil(itemList.length/pLimit);
- // 类型 1 数据全部查出来, 清空列表在显示 适用于总数开始已知
- // 类型 2 数据不清空, 隐藏方式. 适用于数量递增的, 总数变化
- if(type==1){
- // 获取所有的数据, 每 limit 数 分一组
- var aPage=new Array();
- var pageHtmlList=new Array();
- var pageHtml='';
- for(var i=0;i<page;i++){
- var s=pLimit*i,e=pLimit*(i+1);
- pageHtml='';
- aPage[i]=itemList.slice(s,e);
- for(var j=0;j<pLimit;j++){
- if($(aPage[i][j]).prop('outerHTML')!=undefined){
- pageHtml=pageHtml+$(aPage[i][j]).prop('outerHTML');
- }
- }
- // 每页数据封存 在 pageHtmlList 数组里
- pageHtmlList[i]=pageHtml;
- }
- // 处理显示, 默认显示第一页内容
- pWrap.empty().append(pageHtmlList[currentPage])
- pageBox.text((currentPage+1)+'/'+page)
- // 上一页
- preBtn.click(function(){
- if(currentPage==0){return false;}
- currentPage--;
- pWrap.empty().append(pageHtmlList[currentPage]);
- pageBox.text((currentPage+1)+'/'+page)
- })
- // 下一页
- aftBtn.click(function(){
- if(currentPage==page-1){return false;}
- currentPage++;
- pWrap.empty().append(pageHtmlList[currentPage]);
- pageBox.text((currentPage+1)+'/'+page)
- })
- }
- if(type==2){
- // 获取所有的数据, 每 limit 数 分一组
- var aPage=new Array();
- for(var i=0;i<page;i++){
- var s=pLimit*i,e=pLimit*(i+1);
- aPage[i]=itemList.slice(s,e);
- }
- // 处理显示
- //current=2, 显示第后一页内容
- if(current==2){
- pWrap.find(obj).hide();
- currentPage=page-1;
- for(var i=0;i<pLimit;i++){
- $(aPage[currentPage][i]).show();
- }
- pageBox.text(page+'/'+page)
- }else{
- pWrap.find(obj).hide();
- for(var i=0;i<pLimit;i++){
- $(aPage[currentPage][i]).show();
- }
- pageBox.text((currentPage+1)+'/'+page)
- }
- // 上一页
- preBtn.click(function(){
- if(currentPage==0){return false;}
- currentPage--;
- pWrap.find(obj).hide();
- for(var i=0;i<pLimit;i++){
- $(aPage[currentPage][i]).show();
- }
- pageBox.text((currentPage+1)+'/'+page)
- })
- // 下一页
- aftBtn.click(function(){
- if(currentPage==page-1){return false;}
- currentPage++;
- pWrap.find(obj).hide();
- for(var i=0;i<pLimit;i++){
- $(aPage[currentPage][i]).show();
- }
- pageBox.text((currentPage+1)+'/'+page)
- })
- }
- }
- // 类型 1
- // pagenation(1,2,'.p-wrap',5,'.p-item','.pre','.aft','.pageBox');
- // 类型 2
- pagenation(2,1,'.p-wrap',5,'.p-item','.pre','.aft','.pageBox');
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/44091/3e4a9e0a9ee3553ed085aeeb1d2c55bb.html