Angular分页排序

最新推荐文章于 2020-03-09 15:33:01 发布

Esengnet

最新推荐文章于 2020-03-09 15:33:01 发布

阅读量2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript(jquery | angualry)

本文链接：https://blog.youkuaiyun.com/Esengnet/article/details/22925897

javascript(jquery | angualry) 专栏收录该内容

14 篇文章

订阅专栏

这个示例展示了如何在AngularJS应用中实现表格数据的分页和排序功能。通过点击表格头进行字段排序，使用自定义指令`pagediv`进行分页显示，每页显示20行数据，最大每行展示10个分页按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="../ajax/jquery-ui-1.9.0/js/jquery-1.8.2.js"></script>
<script src="angular.js"></script>
<style>
tr, td{
      cursor:pointer;
     text-align: left;
     padding-top: 2px !important;
     padding-right: 2px !important;
     padding-bottom: 2px !important;
     padding-left: 2px !important;
     vertical-align: top;
    }

    tr.title{
     color: #ffffff;
      border-bottom-color: #ffffff;
      font-weight: normal;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      background-color: rgb(153,173,194);
    }

    .odd {
      color: #000000;
      //border-bottom-color: #ffffff;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      background-color: rgb(219,228,237);
      }

    .even{
      color: #000000;
      //border-bottom-color: #ffffff;
      border-bottom-width: 5px;
      border-bottom-style: solid;
      background-color: rgb(191,204,217);
      }
a:link{
   color: #003399;
   background-color: transparent;
}
body{
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   background-color: white;
}

pageDiv{
width: 100%;
height: 20px;
text-align: left;
line-height: 20px;
padding-right: 0px;
padding-left: 0px;
float: right;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: rgb(219, 228, 238);
}

a, a:visited, a:hover{
text-decoration: none;
}

}
</style>

</head>

<body ng-controller="MainCtrl">

<table style="width:100%;" >
<tr >
    <td colSpan="4" style="width:100%;background-color: rgb(219, 228, 238);">
      <pagediv row-page="rowPage" page-Num-per-line='pageNumPerLine' total-row="datas.length" current-page="currentPage" ></pagediv>
    </td>
</tr>
<tr class="title">
    <td><a href="#" ng-click="orderProp = 'id'; reverse=!!!reverse">ID</a></td>
    <td><a href="#" ng-click="orderProp = 'name'; reverse=!reverse">Name</a></td>
    <td><a href="#" ng-click="orderProp = 'email'; reverse=!reverse">Email</a></td>
    <td><a href="#" ng-click="orderProp = 'phone'; reverse=!reverse">Phone</td></tr>
<tr ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat=" data in ( (datas | orderBy:orderProp:reverse).slice(currentPage * rowPage - rowPage ,currentPage * rowPage )) " >
    <td style="width:20%;">{{data.id}}</td>
    <td style="width:20%;">{{data.name}}</td>
    <td style="width:40%;">{{data.email}}</td>
    <td style="width:20%;">{{data.phone}}</td>
</tr>
<tr >
    <td colSpan="4" style="width:100%;background-color: rgb(219, 228, 238);">
      <pagediv row-page="rowPage" page-Num-per-line='pageNumPerLine' total-row="datas.length" current-page="currentPage" ></pagediv>
    </td>
</tr>

</table>

Current Page:<input type="text" name="dd" ng-model="currentPage" />

Rows per Page:<input type="text" name="dds" ng-model="rowPage" />

            {
                pages: '@paginatePages',
                localRowPage: '=rowPage',
                localTotalRow: '=totalRow',
                localCurrentPage: '=currentPage',
                localPageNumPerLine: '=pageNumPerLine' // localModel = attr name
            },
            template: '<div></div>',

            controller: function($scope, $log, $element, $attrs) {
                $scope.localPageNumPerLine = $scope.localPageNumPerLine || 8;
                $scope.currentStart = 1;
                $scope.currentEnd = $scope.localPageNumPerLine;
                $scope.localCurrentPage = 1;

                try{

                  $scope.totalPage = $scope.localTotalRow % $scope.localRowPage == 0 ? Math.floor($scope.localTotalRow / $scope.localRowPage) : Math.ceil($scope.localTotalRow / $scope.localRowPage) ;
                  $scope.currentStart = $scope.totalPage == 1 ? 1 : $scope.currentStart;
                  $scope.currentEnd = $scope.totalPage == 1 ? 1 : $scope.currentEnd;


               }catch(e){$log.info(e);}

                $scope.selectPage = function(pageIndex) {
                    $scope.localCurrentPage = pageIndex;
                    $scope.rightPageNum = (Math.floor($scope.localPageNumPerLine / 2) - 1) || 1 ;
                    $scope.currentEnd = Math.floor(pageIndex) +$scope.rightPageNum < $scope.totalPage ? (Math.floor(pageIndex) +$scope.rightPageNum < $scope.localPageNumPerLine? $scope.localPageNumPerLine : Math.floor(pageIndex) +$scope.rightPageNum ): $scope.totalPage;
                    $scope.currentStart = $scope.currentEnd - $scope.localPageNumPerLine + 1;
                    $scope.currentStart = $scope.currentStart < 1 ? 1 : $scope.currentStart;
                    try{
                      $scope.draw();
                      $scope.dataBind();
                    }catch(e){}
                }
                $scope.appendItem = function(pageIndex, txt) {
                    var link;
                    var prev=false, last=false;
                    try{
                    prev = pageIndex > 1 || $scope.localCurrentPage > 1 ?true: false;
                    last = pageIndex > 1 && pageIndex < $scope.totalPage ? true:false;

                    txt = txt || pageIndex+ (pageIndex == $scope.currentEnd? " " : ", ");

                    if (prev || last ){
                       if ( pageIndex == $scope.localCurrentPage){
                          link = $("<span >" + txt + "</span>");
                       }else{
                         link = $("<a href='#' ng-click='selectPage("+pageIndex+")' >" + txt + "</a>");
                       }
                    }else{
                       link = $("<span >" + txt + "</span>");
                    }
                    }catch(e){alert(e);}

                    $element.append(link);
                } //end appendItem

                $scope.dataBind = function(){
                  try{
                    var $injector = angular.injector(['ng']); //modules['ng','ngLocal','app'] ng-app='app'
                     $injector.invoke(function($compile) {
                       $compile($element)($scope);
                       $scope.$digest();

                    });
                  }catch(e){
                    log("dataBind error: "+e);
                    throw e;
                   }
                }


                $scope.draw = function() {

                    $($element).empty();

                    $log.info("start:"+$scope.currentStart+"   end:"+$scope.currentEnd+" current:"+$scope.localCurrentPage);

                    // Generate Prev link
                    if ($scope.totalPage > 1 && $scope.localPageNumPerLine > 1) {
                        $scope.appendItem(1 ,"<< ");
                        $scope.appendItem(Math.ceil($scope.localCurrentPage) - 1 , "< ");
                    }

                    // Generate interval links
                    for (var i = $scope.currentStart; i <= $scope.currentEnd; i++) {
                        $scope.appendItem(i);
                    }

                    // Generate Next link
                    if ($scope.totalPage > 1 && $scope.localPageNumPerLine > 1) {
                        $scope.appendItem($scope.localCurrentPage == $scope.totalPage ? $scope.totalPage : Math.ceil($scope.localCurrentPage)+ 1, "> ");

                        $scope.appendItem($scope.totalPage, ">>");
                    }


                }

            }, //end controller
            link: function(scope, element, attrs, controller) {
                scope.$watch('localCurrentPage',function(){scope.selectPage(scope.localCurrentPage);});

            }

        }
   });
</script>
</body>
</html>