Angularjs로 페이지네이션 기능 구현 및 예제 코드

Angularjs를 기반으로 한 페이지네이션

서론

　　　　　　 어떤 언어를 배우기 전에는 항상 비즈니스 요구가 학습을 이끌어줍니다. ng도 마찬가지입니다. ng를 배우기 전에 제가 가장 먼저 만들고 싶은 demo는 ng를 기반으로 한 페이지네이션을 구현하는 것이었습니다. 기본 계산 방식 외에도 지시자로 포장하여 플러그인으로 만들고, 페이지네이션이 필요한 목록 페이지 내에서 직접 참조할 수 있습니다.

플러그인

　　　　　 페이지 플러그인을 포장할 때는 여러 가지 방법을 시도했는데, 일반적으로 흩어져 있었습니다. 결국 친구(http://www.miaoyueyue.com/archives/813.html)로 포장된 플러그인을 사용해 보았는데, 꽤 좋았고, 그 소스 코드를 읽고 바로 프로젝트에서 사용했습니다.

원리와 사용 설명

　　　　　 1플러그인 소스 코드는 주로 angular directive를 기반으로 구현되었습니다.

　　　　　 2호출할 때 중요한 부분은 백엔드 요청 처리 함수입니다. 즉, 백엔드에서 데이터를 가져오는 부분.

　　　　　 3플러그인에는 두 가지 중요한 매개변수가 있습니다. currentPage, itemsPerPage, 현재 페이지 번호와 페이지당 기록 수.

　　　　　 4호출 후에는 각 번호를 클릭할 때마다 백엔드에 다시 제출하여 해당 페이지 데이터를 얻어야 합니다. 호출된 페이지에서는 $watch를 사용하여 모니터링합니다. 처음 사용할 때는 함수를 플러그인의 onchange에 넣었고,结果是每次都会触发两次后台。这个地方需要注意。

　　　　　 5、나는 배후 요청을 Service 계층으로 래핑했고, 그런 다음 Controller에서 호출했으며, MVC 개념에도 맞습니다。

效果图

　

调用代码

<div ng-app="DemoApp" ng-controller="DemoController">
 <table class="table table-striped">
  thead>
   tr>
    <td>ID</td>
    <td>FirstName</td>
    <td>LastName</td>
    <td>Status</td>
    <td>Address</td>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="emp in persons">
    <td>{{emp.ID}}</td>
    <td>{{emp.FirstName}}</td>
    <td>{{emp.LastName}}</td>
    <td>{{emp.Status}}</td>
    <td>{{emp.Address}}</td>
   </tr>
  </tbody>
 </table>
 <tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script type="text/javascript">
 var app = angular.module('DemoApp', ['tm.pagination']);
 app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {
  var GetAllEmployee = function () {
   var postData = {
    pageIndex: $scope.paginationConf.currentPage,
    pageSize: $scope.paginationConf.itemsPerPage
   });
   BusinessService.list(postData).success(function (response) {
    $scope.paginationConf.totalItems = response.count;
    $scope.persons = response.items;
   });
  });
  //페이지네이션 기본 설정 구성
  $scope.paginationConf = {
   currentPage: 1,
   itemsPerPage: 5
  });
  /***************************************************************
  페이지 번호와 페이지 기록 수가 변경될 때 백엔드 쿼리를 모니터링합니다
  
  ***************************************************************/
  $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
 });
 //업무 클래스
 app.factory('BusinessService', ['$http', function ($http) {
  var list = function (postData) {
   return $http.post('/Employee/GetAllEmployee', postData);
  });
  return {
   list: function (postData) {
    return list(postData);
   });
  });
 });
</script>

　플러그인 및 Demo 다운로드

http://yunpan.cn/cQEhnLrpnkniQ　 방문 비밀번호 be74

이것은 AngularJS에서 페이지네이션 기능을 구현하는 자료 정리입니다. 향후 추가적인 자료를 계속 추가할 것입니다. 많은 도움을 주셔서 감사합니다!

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자에게 속하며, 인터넷 사용자가 자발적으로 기여하고 자체로 업로드한 내용입니다. 이 웹사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해 내용을 발견하시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보내는 이메일에서 #을 @으로 변경하시고, 관련 증거를 제공하시면, 사이트는 즉시 저작권 침해 내용을 삭제합니다。）