ANGULARJS implementation paging functionality and sample code _ANGULARJS

Paging based on ANGULARJS implementation

Objective

There must be a business need to drive you to learn it before you learn any language, of course ng is no exception, in the study of NG before I want to do the demo is based on NG to achieve pagination, remove the basic calculation idea is to use the instructions packaged into a plug-in, in need of pagination in the list of pages directly referenced.

Plug - ins

In the package paging plugin I realized several ways overall are relatively fragmented, and finally found a friend (http://www.miaoyueyue.com/archives/813.html) package of plug-ins, feel good, read his source code directly in the project used.

Principle and use Instructions

1, plug-in source code is mainly based on angular directive to achieve.

2, call the key place is the background request processing function, that is, from the background to fetch data.

3, the plug-in has two key parameters CurrentPage, ItemsPerPage, the current page number and the number of records per page.

4, after the implementation of the method call we need to click on each page after the paging plug-in page to resubmit the background to get the corresponding page number data.  In the page number of the call I used the $watch to monitor. When I first used it, I put the calling function in the onchange of the plugin, and found that it triggers two times in the background each time. This place needs attention.

5, I put the request backstage encapsulation into the service layer, and then call in the controller, also in line with the MVC idea.

Effect chart

Calling 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&gt ; status</td> <td>Address</td> </tr> </thead> <tbody> <tr ng-repeat= "em P 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-p agination> </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 paging base parameter $scope. paginationconf = {currentpage:1, itemsperpage:5};
  /*************************************************************** Monitor Background query when page number and page record number change
  If CurrentPage and itemsperpage are separately monitored, then two background events are 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 to {list:function (postdata) {return list (postdata);
}
  }
 }]);
 </script>

Plugins and Demo Downloads

Http://yunpan.cn/cQEhnLrpnkniQ Access Password Be74

The above is angularjs to achieve the paging function of the data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!