angular.js分页代码的实例

前端技术 2023/09/01 JavaScript

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

先来看下效果图

实例代码

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分页代码的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/1722

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案