Preface
Before learning any language, there must be business needs to drive you to learn it. Of course, ng is no exception. Before learning ng, the first demo I wanted to do was to implement paging based on ng. In addition to the basic computing idea, it is to use instructions to encapsulate it into a plug-in and directly reference it in the list page that needs paging.
Plugin
When I encapsulating the paging plugin, I implemented several methods in general, and I finally found a plug-in encapsulated by a friend (http://www.miaoyueyue.com/archives/813.html). I felt it was pretty good, so I read his source code and used it directly in the project.
Principles and instructions for use
1. The plug-in source code is mainly implemented based on angular directive.
2. The key point when calling is the background request processing function, that is, to get data from the background.
3. The plug-in has two key parameters: currentPage, itemsPerPage, current page number and record number per page.
4. After implementing the method call, we need to resubmit the background to obtain the corresponding page number data based on each click on the page number of the paging plug-in. In the page number of the call I used $watch to monitor. When I first used it, I put the calling function in the plug-in's onchange, but I found that the background will be triggered twice each time. This place needs attention.
5. I encapsulate the request background into a Service layer and then call it in the Controller, which is also in line with the MVC idea.
Reproduction diagram
Call code
<div ng-app="DemoApp" ng-controller="DemoController"><table><thead><tr><td>ID</td><td>FirstName</td><td>LastName</td><td>Status</td><td>Address</td></tr></thead><tbody><ttr 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></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 the basic parameters of paging $scope.paginationConf = {currentPage: 1,itemsPerPage: 5};/****************************************************************************************************************** When the page number and page record number change, monitoring background query If currentPage and itemsPerPage are monitored separately, two background events will be triggered. ***************************************************************/$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>The above content is the example code that the editor introduces to you to implement the paging function based on Angularjs. I hope it will be helpful to everyone!