Home>

Displaying a list of items is a common task for most web applications.usually,We will have more data,Does not display well on a single page.under these circumstances,We need to display the data in pages.With the function to go to the previous and next pages.Now learning angular, using angularjs pagination, based on directive implementation, style bootstrap, add tags directly in the html code to call.

First look at the effect map

Example code

app.directive ("pagepagination", function () {
  return {
    restrict:"e",    template:"<div><ul><li ng-class =" page.style "ng-repeat =" page in pagelist "><a href =" {{page.link}} ">{{page.name}}</a></li></ul>{{pagerecord}}</b>records/total<b>{{pagecount}}</b>pages</span></li></ul></div>,    replace:true,    scope:{
      "pageid":"=",      "pagerecord":"=",      "pagesize":"=",      "pageurltemplate":"="
    },    controller:["$scope", function ($scope) {
      $scope.getlink=function (pageid) {
        return $scope.pageurltemplate.replace ("{page}", pageid);
      };
      $scope.getpagelist=function () {
        var page=[];
        var firstpage=parseint (($scope.pageid-1)/$scope._pagesize) * $scope._pagesize + 1;
        page.push ({
          name:"Home",          style:$scope.pageid == 1?"disabled":"",          link:$scope.getlink (1)
        });
        page.push ({
          name:"Previous Page",          style:$scope.pageid == 1?"disabled":"",          link:$scope.getlink (1)
        });
        for (var pageid=firstpage;pageid<firstpage + 10;pageid ++) {
          if (pageid>= 1&&pageid<= $scope.pagecount) {
            page.push ({
              name:pageid,              link:$scope.getlink (pageid),              style:pageid == $scope.pageid?"active":""
            });
          }
        }
        page.push ({
          name:"Next Page",          style:$scope.pageid == $scope.pagecount?"disabled":"",          link:$scope.getlink ($scope.pagecount)
        });
        page.push ({
          name:"last page",          style:$scope.pageid == $scope.pagecount?"disabled":"",          link:$scope.getlink ($scope.pagecount)
        });
        return page;
      };
      $scope.pageinit=function () {
        if (! $scope.pageid ||! $scope.pagerecord) {
          settimeout (function () {
            $scope. $apply (function () {
              $scope.pageinit ();
            });
          }, 10);
        } else {
          if (!! $scope.pagesize) {
            $scope._pagesize=parseint ($scope.pagesize);
          } else {
            $scope._pagesize=10;
          }
          $scope.pageid=parseint ($scope.pageid);
          $scope.pagecount=parseint (($scope.pagerecord-1)/$scope._pagesize) + 1;
          if ($scope.pageid<1) {
            $scope.pageid=1;
          } else if ($scope.pageid&$scope.pagecount) {
            $scope.pageid=$scope.pagecount;
          }
          $scope.pageload=true;
          $scope.pagelist=$scope.getpagelist ();
        }
      };
      $scope.pageload=false;
      $scope.pageinit ();
    }]
  }
});

Calling code:

<page-pagination
  page-id="pageid"
  page-record="recordcount"
  page-url-template="urltemplate">
</page-pagination>
  • Previous Analysis of git multi-account login problems
  • Next Basic Principles of Android Custom Controls (1)