angularjs表格分页功能详解  更新时间:2016年01月21日 10:27:51   投稿:hebedich   本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码,非常的简单实用,有需要的小伙伴可以参考下。 接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的。 上一页 下一页 当前为第页,总共页 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+=”+(current_num+1)+”; 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(); 以上就是表格的前端分页方法和页数,页标等跳转方式的方法,请结合第一章中的数据测试。 您可能感兴趣的文章: angularjs实现的前端分页控件示例 ANGULARJS中使用JQUERY分页控件 AngularJS实现分页显示数据库信息 基于Angularjs实现分页功能 Angularjs分页查询的实现 学习Angularjs分页指令 AngularJS 与Bootstrap实现表格分页实例代码 详解angularjs结合pagination插件实现分页功能 Angularjs 实现分页功能及示例代码 AngularJs分页插件使用详解 angularjs 表格分页 相关文章 Angular页面间切换及传值的4种方法 这篇文章主要为大家详细介绍了Angular页面间切换及传值的四种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-11-11 Angular4集成ng2-file-upload的上传组件 本篇文章主要介绍了Angular4集成ng2-file-upload的上传组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 AngularJS实现select的ng-options功能示例 这篇文章主要介绍了AngularJS实现select的ng-options功能,结合实例形式分析了AngularJS使用ng-options操作select列表的相关实现技巧,需要的朋友可以参考下 2017-07-07 AngularJS中使用ngModal模态框实例 本篇文章主要介绍了AngularJS中使用ngModal模态框实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 angularjs 动态从后台获取下拉框的值方法 今天小编就为大家分享一篇angularjs 动态从后台获取下拉框的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 玩转Koa之koa-router原理解析 本文将要分析的是经常用到的路由中间件 — koa-router,详细的介绍了koa-router概述和实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 详解angularjs 关于ui-router分层使用 本篇文章主要介绍了详解angularjs 关于ui-router分层使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 Angular7创建项目、组件、服务以及服务的使用 这篇文章主要介绍了Angular7创建项目、组件、服务以及服务的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-02-02 angularjs结合html5实现拖拽功能 本篇文章给大家分享了angularjs结合html5实现拖拽功能的方法以及代码实例,有兴趣的朋友参考下。 2018-06-06 angularJS的radio实现单项二选一的使用方法 下面小编就为大家分享一篇angularJS的radio实现单项二选一的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 最新评论

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

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("&nbsp;"+current_page+"&nbsp;");//显示当前页
      $("#page_all").html("&nbsp;"+page_num+"&nbsp;");//显示总页数
      $("#previous").click(function(){//上一页
        var new_page=parseInt($("#current_page").text())-1;
        if(new_page>0){
          $("#current_page").html("&nbsp;"+new_page+"&nbsp;");
          tab_page(new_page);
        }
      });
      $("#next").click(function(){//下一页
        var new_page=parseInt($("#current_page").text())+1;//当前页标
        if(new_page<=page_num){//判断是否为最后或第一页
          $("#current_page").html("&nbsp;"+new_page+"&nbsp;");
          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("&nbsp;"+current_page+"&nbsp;");
      }
    }
table_page();

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

您可能感兴趣的文章:

  • angularjs实现的前端分页控件示例
  • ANGULARJS中使用JQUERY分页控件
  • AngularJS实现分页显示数据库信息
  • 基于Angularjs实现分页功能
  • Angularjs分页查询的实现
  • 学习Angularjs分页指令
  • AngularJS 与Bootstrap实现表格分页实例代码
  • 详解angularjs结合pagination插件实现分页功能
  • Angularjs 实现分页功能及示例代码
  • AngularJs分页插件使用详解
张贴在3