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 相关文章推荐
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
jQuery实现视频展示效果
May 30 jQuery
使用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静态类的原罪详解
2013/05/06 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python3实现名片管理系统
2020/11/29 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python3字符串操作总结
2019/07/24 Python
Django实现跨域的2种方法
2019/07/31 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
大学生村官心得体会范文
2014/01/04 职场文书
清扬洗发水广告词
2014/03/14 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python