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 相关文章推荐
简单的js分页脚本
May 21 Javascript
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
详解webpack 热更新优化
Sep 13 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
实例分析javascript中的异步
Jun 02 Javascript
js数组中去除重复值的几种方法
Aug 03 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 无限级分类 获取顶级分类ID
2016/03/13 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
js读取cookie方法总结
2014/10/31 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
浅谈Python中的私有变量
2018/02/28 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
教师年终个人自我评价
2013/10/04 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
模具专业求职信
2014/06/26 职场文书
学校师德师风整改方案
2014/10/28 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
高中运动会广播稿
2015/08/19 职场文书
教师研修随笔感言
2015/11/18 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技