ANGULARJS implementation paging functionality and sample code _ANGULARJS

Source: Internet
Author: User

Paging based on ANGULARJS implementation


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 ( 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);

Plugins and Demo Downloads

Http:// 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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.