Angularjs Paging Implementation

Basic ideas

Start Page number for 1,service to the server side of the corresponding information, click on/Next page/jump, through the corresponding page number to the server side to obtain the corresponding information.

Because the background is temporarily not ready, I realized the process of directly reading the prepared JSON file, through the page number to obtain the corresponding information section and through the Ng-repeat on the page display specific information.

Show

The function code of paging is implemented directly in controller

HTML section

1 <Divclass= "pagination">2   <ul>3     <Liclass= "Pagination-btn"Ng-class= "{true: ' active '}[currentpage = = page]"ng-repeat= "page in pages"Ng-click= "Selectpage (page)">4 {{page}}5     </Li>6     <inputclass= "Pagination-input"Ng-model= "Destpage">7     <Liclass= "PAGINATION-JMP"Ng-click= "Skippage ()">Jump</Li>8   </ul>9   <Divclass= "Pagination-btn-group">Ten     <Divclass= "Pagination-prev"Ng-click= "PrevPage ()"Ng-class= "{true: ' disabled '}[currentpage = = 1]">&lt;Previous page</Div> One     <Divclass= "Pagination-next"Ng-click= "NextPage ()"Ng-class= "{true: ' disabled '}[currentpage = = EndPage]">Next page&gt;</Div> A   </Div> - </Div>

Ng-class= "{true: ' active '}[currentpage = = page]" means that when the page is current, the CSS style of the. Active is applied.

In angular, we offer 3 scenarios to handle class:

1.scope variable Binding

such as: <div class= "{{test}}" ></div> then set the $ in controller Scope.test value, deprecated, controller should put business logic part, service and server interaction, Directive and page interaction

2. String array Form

Form: <div ng-class= "{true: ' active ', false: ' inactive '}[expression]" > expression is true, then active; otherwise inactive

3. Object Key/value Processing

Shape: <div ng-class {' selected ': isSelected, ' car ': IsCar} ' > IsSelected to True, Add. selected style; IsCar to true, increase car style

Functional section

1$scope. loadpagination =function() {2$scope. Pages = [];3   vari,j;4 5   if($scope. CurrentPage = = "1 ..."){6$scope. currentpage = 1;7}Else if($scope. CurrentPage = = "..." +$scope. EndPage) {8$scope. currentpage =$scope. endpage;9   }Ten  One   if(($scope. EndPage <= 5) | | ($scope. CurrentPage <= 3)){ A$scope. pages[0] = 1; -      for(i = 1;i < 5;i++){ -       if(i = =$scope. EndPage) the          Break; -$scope. pages[i] = i + 1; -     } -     if(I <$scope. EndPage) { +$scope. pages[4] = "..." +$scope. endpage; -     } +}Else if($scope. CurrentPage <= $scope. endPage-3){ A$scope. Pages[0] = "1 ..."; at$scope. pages[1] = $scope. currentPage-1; -$scope. pages[2] =$scope. currentpage; -$scope. pages[3] = $scope. CurrentPage + 1; -$scope. pages[4] = "..." +$scope. endpage; -}Else{ -$scope. Pages[0] = "1 ..."; in$scope. pages[1] = $scope. endPage-3; -$scope. pages[2] = $scope. endPage-2; to$scope. pages[3] = $scope. endPage-1; +$scope. pages[4] =$scope. endpage; -   } the  *   varStart= ($scope. currentPage-1) *$scope. pageSize; $   varend= $scope. CurrentPage *$scope. pageSize;Panax Notoginseng$scope. dialoglist =$scope. Realdialoglist.slice (start,end); - }; the  +$scope. PrevPage =function() { A$scope. currentpage-= 1; the $scope. loadpagination (); + }; -  $$scope. NextPage =function() { $$scope. currentpage + = 1; - $scope. loadpagination (); - }; the  -$scope. Skippage =function() {Wuyi   varDestpage=Number ($scope. destpage); the$scope. Destpage = ""; -   if(IsNaN (destpage) | | destpage <= 0 | | destpage >$scope. EndPage) { Wu     return ; -   } About$scope. currentpage =Destpage; $ $scope. loadpagination (); - }; -  -$scope. Selectpage =function(selected) { A$scope. currentpage=selected; + $scope. loadpagination (); the};

$scope. Realdialoglist The JSON information obtained for the service,$scope. Dialoglist for the information to be displayed on the page

The key here is loadpagination (), my idea is to set 5 button paging, the first button as the home link, the last button as the end link, leaving three buttons, the current page number is set as the middle button.

The number is divided into three states according to the first/last button of the page bar:

1. The first page is ' 1 ', at this time the page number <=3 or last <=5, when the last >5, set to ' ... X

2. The homepage is ' 1 ... ' and the last page is ' ... X ', this time page <= end-3

3. First bit ' 1 ... ', the last page is ' X ', other cases

It is recommended that pagination be written as directive or service

Angularjs Paging Implementation