angularjs表格分页功能详解


Posted in Javascript onJanuary 21, 2016

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路

html:

1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的。

<div class="pagination">
      <ul style="float:right">
        <li id="previous"><a href="">上一页</a></li>
        <li><!--用于页标的显示 -->
          <ul id="page_num_all">
          </ul>
        </li>
        <li id="next"><a href="" style="border:1px solid #ddd;float:right">下一页</a></li>
      </ul>
      <span>
        当前为第<span class="num" id="current_page"></span>页,总共<span class="num" id="page_all"></span>页
      </span>
    </div>

js:

1.首先需要设置每页想要显示的条数,通过选取页面元素来确定本次生成的总条数,以及当前所在的页数(为跳转做准备)

2.如果总页数大于生成的当前页数,则继续生成下一页直到完毕后,将角标添加到页面中

3.将所有的表格数据隐藏,只显示一开始设置的第一页中的5条

4.跳转页面功能,tab_page()通过传入的index(页数)*显示的条数来确定截取tr的开始位置和结束位置,然后将所有的tr隐藏,只显示该范围内的tr(display:“”);

5.上一页下一页和跳转功能,获取当前页的数字,注意判断是否为第一或最后一页,将其作为index传入跳转功能中即可

function table_page(){
      var show_page=5;//每页显示的条数
      var page_all=$("#page").children().size();//总条数
      var current_page=1;//当前页
//    console.log(page_all);
      var page_num=Math.ceil(page_all/show_page);//总页数
      var current_num=0;//用于生成页标的计数器
      var li="";//页标元素
      while(page_num>current_num){//循环生成页标元素
        li+='<li class="page_num"><a href="javasctip:(0)">'+(current_num+1)+'</a></li>';
        current_num++;
      }
      $("#page_num_all").html(li);//添加页标到页面
      $('#page tr').css('display', 'none');//设置隐藏
      $('#page tr').slice(0, show_page).css('display', '');//设置显示
      $("#current_page").html(" "+current_page+" ");//显示当前页
      $("#page_all").html(" "+page_num+" ");//显示总页数
      $("#previous").click(function(){//上一页
        var new_page=parseInt($("#current_page").text())-1;
        if(new_page>0){
          $("#current_page").html(" "+new_page+" ");
          tab_page(new_page);
        }
      });
      $("#next").click(function(){//下一页
        var new_page=parseInt($("#current_page").text())+1;//当前页标
        if(new_page<=page_num){//判断是否为最后或第一页
          $("#current_page").html(" "+new_page+" ");
          tab_page(new_page);
        }
      });
      $(".page_num").click(function(){//页标跳转
        var new_page=parseInt($(this).text());
        tab_page(new_page);
      });
      function tab_page(index){//切换对应页标的页面
        var start=(index-1)*show_page;//开始截取的页标
        var end=start+show_page;//截取个数
        $('#page').children().css('display', 'none').slice(start, end).css('display', '');
        current_page=index;
        $("#current_page").html(" "+current_page+" ");
      }
    }
table_page();

以上就是表格的前端分页方法和页数,页标等跳转方式的方法,请结合第一章中的数据测试。

Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
使用angularjs创建简单表格
Jan 21 #Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 #Javascript
Javascript中神奇的this
Jan 20 #Javascript
javascript实现图片轮播效果
Jan 20 #Javascript
JS获取鼠标坐标位置实例分析
Jan 20 #Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 #Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 #Javascript
You might like
PHP number_format() 函数定义和用法
2012/06/01 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php处理复杂xml数据示例
2016/07/11 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
关于js类的定义
2011/06/28 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python统计中文字符数量的两种方法
2019/01/31 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
python中的测试框架
2020/11/13 Python
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
生产管理的三大手法
2013/11/11 职场文书
优秀教师主要事迹
2014/02/01 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
绿色校园广播稿
2014/10/13 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
学校会议通知范文
2015/04/15 职场文书
周一给客户的问候语
2015/11/10 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
浅谈Python数学建模之数据导入
2021/06/23 Python