Implementation of paging function based on Angularjs _ANGULARJS

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> 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 the basic parameters of paging
$ scope.paginationConf = {
currentPage: 1,
itemsPerPage: 5
};
/ ************************************************* **************
Monitor background queries when page numbers and page records change
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 a small series to introduce the implementation of ANGULARJS based on the page of the example code, I hope to help you!