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 相关文章推荐
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
js中top的作用深入剖析
Mar 04 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
JS模拟实现京东快递单号查询
Nov 30 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程序员的技术瓶颈分析
2011/07/17 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python 获得13位unix时间戳的方法
2017/10/20 Python
django定期执行任务(实例讲解)
2017/11/03 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
护士演讲稿范文
2014/01/05 职场文书
市场安全管理制度
2014/01/26 职场文书
寄语十八大感言
2014/02/07 职场文书
广告创意求职信
2014/03/17 职场文书
教师节活动总结
2014/08/29 职场文书
教师工作失职检讨书
2014/09/18 职场文书
医学生自荐信范文
2015/03/05 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python