[Angular] paging 만들기

[Angular] paging 만들기

먼저 3가지 값을 사용합니다. 

<c:out value="${params.pageIndex}" /> <c:out value="${params.pageUnit}" /> <c:out value="${params.recordCount} />

각각은, 페이지 번호, 한 페이지에서 보여지는 수, 전체 아이템의 수 입니다. 

이를 통해서, 화면상에 표출할 페이지를 결정합니다. 

DIV 태그를 작성합니다. 

<div class="pagination" ng-cloak ng-app="ngAppPage" ng-controller="pagingController">           <button type="button" class="btn-prev" ng-click="fnLinkPrev()">이전</button>           <ul class="clearFix">                                        <li ng-repeat="page in setPage(<c:out value="${params.pageIndex}" />                                                        ,<c:out value="${params.pageUnit}" />                                                        ,<c:out value="${params.recordCount}" />)"                                                                                      ng-class="{current : page == <c:out value="${params.pageIndex}" />}">                <button type="button" ng-click="fnLink(page)">{{page}}</button></li>                                   </ul>           <button type="button" class="btn-next" ng-click="fnLinkNext()">다음</button>      </div><!-- .pagination -->

화면의 깜빡임을 안보이게 하기 위해서, ng-cloak 을 사용합니다. 

ng-app, ng-controller 를 모두 설정합니다. 

angular 모듈을 생성합니다. 

angular.module('ngAppPage',[]).controller('pagingController', function($scope, $window){ });

ng-repeat 에서 함수를 호출합니다. 

선택한 페이지에 클래스를 설정합니다. 

<li ng-repeat="page in setPage(<c:out value="${params.pageIndex}" />                                                        ,<c:out value="${params.pageUnit}" />                                                        ,<c:out value="${params.recordCount}" />)"                                                                                      ng-class="{current : page == <c:out value="${params.pageIndex}" />}">

angular 모듈에, setPage 함수를 생성합니다. 

$scope.setPage = function(pageIndex, pageUnit, recordCount, func){                $scope.pageIndex = pageIndex;                $scope.pageUnit = pageUnit;                $scope.recordCount = recordCount;                $scope.pageMax = Math.floor((recordCount-1) / pageUnit + 1);                               $scope.pageShow = 11;                         $scope.pageShowHalf = Math.floor($scope.pageShow/2);                $scope.pages = [];                               $scope.startPage = pageIndex - $scope.pageShowHalf;                if ($scope.startPage < 1) $scope.startPage = 1;                               $scope.endPage = $scope.startPage + $scope.pageShow;                if ($scope.endPage > $scope.pageMax) $scope.endPage = $scope.pageMax;                               for (var i = $scope.startPage; i <= $scope.endPage; i++){                     $scope.pages.push(i);                };                               return $scope.pages;           };

각각의 파라미터 값을 받은 이후에,

화면상에 보여질 페이지를 결정합니다. 

 $scope.pageShow 는 화면상에 보여지는 페이지의 최대 수 이며, 

$scope.pages = []; 는 화면상에 보여질 페이지의 배열입니다. 

반환된 배열 값으로 화면상에 표출하며, 

버튼 클릭시에, fnLink 함수가 호출 되도록 합니다. 

<button type="button" ng-click="fnLink(page)">{{page}}</button></li>

fnLink 함수를 생성합니다.

$scope.fnLink = function(pageIndex){                if (pageIndex < 1) pageIndex = 1;                if (pageIndex > $scope.pageMax) pageIndex = $scope.pageMax;                               $window.fnLink(pageIndex);           };

실질적인 구현은 Javascript로 하기 위해서, $window 변수를 사용합니다. 

그리고, 함수명은 fnLink로 고정하였습니다.

이전, 다음 버튼을 생성합니다. 

<button type="button" class="btn-prev" ng-click="fnLinkPrev()">이전</button> <button type="button" class="btn-next" ng-click="fnLinkNext()">다음</button>

만약, 맨처음, 맨마지막을 추가한다면, 

각각의 값에, {{startPage}} {{endPage}} 값을 입력하여, fnLink 함수를 호출하도록 생성하면 됩니다. 

각각의 클릭 이벤트 함수를 생성합니다. 

$scope.fnLinkPrev = function(){                $scope.fnLink($scope.pageIndex - 1);                    };            $scope.fnLinkNext = function(){                $scope.fnLink($scope.pageIndex + 1);           };

기존에 생성한 fnLink 함수를 호출하고, 파라미터 값만 변경합니다. 

실질적인 동작인 fnLink 함수를 구현합니다. 

function fnLink(pageIndex) {      document.frm.pageIndex.value = pageIndex;      document.frm.action = "<c:url value='/dev/list.do' />";      document.frm.submit(); }

## 전체 소스 ##

<head>      <script type="text/javascript">           // paging by angular      angular.module('ngAppPage',[]).controller('pagingController', function($scope, $window){           $scope.setPage = function(pageIndex, pageUnit, recordCount, func){                $scope.pageIndex = pageIndex;                $scope.pageUnit = pageUnit;                $scope.recordCount = recordCount;                $scope.pageMax = Math.floor((recordCount-1) / pageUnit + 1);                               $scope.pageShow = 11;                         $scope.pageShowHalf = Math.floor($scope.pageShow/2);                $scope.pages = [];                               $scope.startPage = pageIndex - $scope.pageShowHalf;                if ($scope.startPage < 1) $scope.startPage = 1;                               $scope.endPage = $scope.startPage + $scope.pageShow;                if ($scope.endPage > $scope.pageMax) $scope.endPage = $scope.pageMax;                               for (var i = $scope.startPage; i <= $scope.endPage; i++){                     $scope.pages.push(i);                };                               return $scope.pages;           };                     $scope.fnLink = function(pageIndex){                if (pageIndex < 1) pageIndex = 1;                if (pageIndex > $scope.pageMax) pageIndex = $scope.pageMax;                               $window.fnLink(pageIndex);           };                     $scope.fnLinkPrev = function(){                $scope.fnLink($scope.pageIndex - 1);                    };                     $scope.fnLinkNext = function(){                $scope.fnLink($scope.pageIndex + 1);           };      });                </script> </head> <body>      <div class="pagination" ng-cloak ng-app="ngAppPage" ng-controller="pagingController">           <button type="button" class="btn-prev" ng-click="fnLinkPrev()">이전</button>           <ul class="clearFix">                                        <li ng-repeat="page in setPage(<c:out value="${params.pageIndex}" />                                                        ,<c:out value="${params.pageUnit}" />                                                        ,<c:out value="${params.recordCount}" />)"                                                                                      ng-class="{current : page == <c:out value="${params.pageIndex}" />}">                <button type="button" ng-click="fnLink(page)">{{page}}</button></li>                                   </ul>           <button type="button" class="btn-next" ng-click="fnLinkNext()">다음</button>      </div><!-- .pagination --> </body> </html>