angular.js分页代码的实例


Posted in Javascript onJuly 27, 2016

对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能。现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用。

先来看下效果图

angular.js分页代码的实例

实例代码

app.directive('pagePagination', function(){
  return {
    restrict : 'E',
    template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>',
    replace : true,
    scope : {
      "pageId"      : "=",
      "pageRecord"    : "=",
      "pageSize"     : "=",
      "pageUrlTemplate"  : "="
    },
    controller : ['$scope', function($scope){
       
      $scope.getLink = function(pageId){
        return $scope.pageUrlTemplate.replace("{PAGE}", pageId);
      };
 
      $scope.getPageList = function(){
        var page = [];
        var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
        page.push({
          name  : '首页',
          style  : $scope.pageId == 1 ? "disabled" : "",
          link  : $scope.getLink(1)
        });
        page.push({
          name  : '上一页',
          style  : $scope.pageId == 1 ? "disabled" : "",
          link  : $scope.getLink(1)
        });
        for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
          if( pageId >= 1 && pageId <= $scope.pageCount ){
            page.push({
              name  : pageId,
              link  : $scope.getLink(pageId),
              style  : pageId == $scope.pageId ? "active" : ""
            });
          }
        }
        page.push({
          name  : '下一页',
          style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
          link  : $scope.getLink($scope.pageCount)
        });
        page.push({
          name  : '尾页',
          style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
          link  : $scope.getLink($scope.pageCount)
        });
        return page;
      };
 
      $scope.pageInit = function(){
        if( !$scope.pageId || !$scope.pageRecord ){
          setTimeout(function(){
            $scope.$apply(function(){
              $scope.pageInit();
            });
          }, 10);
        }else{
          if( !!$scope.pageSize ){
            $scope._pageSize = parseInt($scope.pageSize);
          }else{
            $scope._pageSize = 10;
          }
          $scope.pageId    = parseInt($scope.pageId);
          $scope.pageCount  = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
          if( $scope.pageId < 1 ){
            $scope.pageId = 1;
          }else if( $scope.pageId > $scope.pageCount ){
            $scope.pageId = $scope.pageCount;
          }
          $scope.pageLoad   = true;
          $scope.pageList   = $scope.getPageList();
        }
      };
       
      $scope.pageLoad = false;
      $scope.pageInit();
    }]
  }
});

调用代码:

<page-pagination
  page-id="pageId"
  page-record="recordCount"
  page-url-template="urlTemplate">
</page-pagination>

以上就是angular.js分页代码的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
vue实现购物车加减
May 30 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 #Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 #Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 #Javascript
js中遍历对象的属性和值的方法
Jul 27 #Javascript
js中的关联数组与普通数组详解
Jul 27 #Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 #Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 #Javascript
You might like
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
vue实现文字加密功能
2019/09/27 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
Python2.7 实现引入自己写的类方法
2018/04/29 Python
儿童python练习实例
2018/05/27 Python
python and or用法详解
2019/06/26 Python
使用Pycharm分段执行代码
2020/04/15 Python
使用python计算三角形的斜边例子
2020/04/15 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
关于安全演讲稿
2014/05/09 职场文书
自我推荐信范文
2014/05/09 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript