Implementation of pagination function and example code in Angularjs

Pagination based on Angularjs

Preface

　　　　　　 Before learning any language, there is always a business demand that drives you to learn it, of course, ng is no exception. Before learning ng, the first demo I wanted to do was to implement pagination based on ng. Apart from the basic calculation ideas, it is encapsulated into a plugin using directives and directly referenced in the list page that needs pagination.

plugin

　　　　　 When encapsulating the pagination plugin, I implemented several methods, which were relatively scattered in general. Finally, I found a friend(http://www.miaoyueyue.com/archives/813It is a plugin wrapped in .html) and it seems quite good. After reading its source code, I directly used it in the project.

Principle and Usage Instructions

　　　　　 1The plugin source code is mainly based on angular directive to implement.

　　　　　 2The key point when calling is the background request handling function, which is to obtain data from the background.

　　　　　 3The plugin has two key parameters: currentPage and itemsPerPage, which represent the current page number and the number of records per page.

　　　　　 4After the method call, we need to resubmit the background according to the page number clicked by the pagination plugin each time to obtain the data of the corresponding page. I used $watch to monitor the page number being called. When I first used it, I placed the call function in the plugin's onchange, only to find that the background was triggered twice each time. This is something that needs to be noticed.

　　　　　 5I encapsulated the request to the background into the Service layer, and then called it in the Controller, which also conforms to the MVC idea.

Illustration

　

Call code

<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;
   });
  });
  //Configure basic pagination parameters
  $scope.paginationConf = {
   currentPage: 1,
   itemsPerPage: 5
  };
  /***************************************************************
  Monitor backend query when page number and number of records per page change
  
  ***************************************************************/
  $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
 });
 //Business Class
 app.factory('BusinessService', ['$http', function ($http) {
  var list = function (postData) {
   return $http.post('/Employee/GetAllEmployee', postData);
  });
  return {
   list: function (postData) {
    return list(postData);
   });
  });
 });
</script>

　Plugin and Demo Download

http://yunpan.cn/cQEhnLrpnkniQ Password to access be74

This is the material collection for implementing pagination in AngularJS, and more related materials will be supplemented later, thank you all for your support to this site!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, nor has it been manually edited, nor does it assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @ when sending an email) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.