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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
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,js双版本
2012/09/25 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
vue中改变滚动条样式的方法
2020/03/03 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
教师工作表现评语
2014/12/31 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书