Learn Angularjs Paging Instructions _angularjs

Many of the pages in the project are used pagination, and then each page has a lot of repeated pagination code, so they wrote a simple pagination instructions, simplifying the page code, and easy maintenance, write in the blog as a backup, convenient to consult later.
Here are the steps to define instructions and their applications:

1. Directive definition
define a JS file, page-directive.js, used to write pagination of the instruction code, this file contains the paging template, the following is the JS file in all the code:

' Use strict '; (function () {angular.module (' template/pageinit/pageinit.html ', []). Run ([' $templateCache ', function ($templateCache {$templateCache. Put (' template/pageinit/pageinit.html ', ' <ul class= ' Pagination-main ">\n ' + ' <li clas s= "Prev-page" ng-class= "{disabled:pagedata.currentpage==1}" title= "Home page" >\n ' + ' <a href= "javascript:void (0);" Ng  -click= "On_loadpage (1)" ><span class= "fa fa-fast-backward" ></span></a>\n ' + ' </li>\n ' + ' <li class= "Prev-page" ng-class= "{disabled:pagedata.currentpage==1}" >\n ' + ' <a href= "javascript:void (0);" N G-click= "On_prev ()" title= "Previous page" ><span class= "fa fa-step-backward" ></span></a>\n ' + ' </li >\n ' + ' <li class= "data-page" ng-repeat= "page in Pagedata.pages" ng-class= "{\ ' first-page\ ': page==1, \ ' Last-page \ ': page==pagedata.totalpage} ' >\n ' + ' <a ng-if= ' page!=\ ' ... \ ' href= ' javascript:void (0); "ng-class=" {\ ' Bg-cust Om\ ': Page==pagedata.CurrentPage} "ng-click=" On_loadpage (page, tabdata) ">{{page}}</a>\n ' + ' <a ng-if= ' page==\ ' ... \ '" href= "J Avascript:void (0); "ng-class=" {\ ' bg-custom\ ': page==pagedata.currentpage} "ng-click=" ">{{page}}</a>\n ' + '
    </li>\n ' + ' <li class= ' next-page ' ng-class= ' {disabled:pagedata.currentpage==pagedata.totalpage} ' >\n ' + "<a href=" javascript:void (0); "ng-click=" On_next () "title=" Next "><span class=" fa Fa-step-forward "></ span></a>\n ' + ' </li>\n ' + ' <li class= "skip-page" ><div><input type= "text" Placeholde R= "" ng-model= "inpage" >\n ' + ' <input type= "button" value= "Jump" ng-click= "On_loadpage (inpage)" ></div>\n ' + ' </li>\n ' + ' <li class= ' data-num ' ><a class= ' cursor-text ' href= ' # ' ><span> total {{pagedata.co
  UNT}} Bar </span></a></li>\n ' + ' </ul>\n ' + ');
 }
 ]);
 Angular.module (' Pageinit ', [' template/pageinit/pageinit.html ']) . directive (' Pageinit ', [' pageinittemplate ', function (pageinittemplate) {return {restrict: ' AE ', Templateurl
    : function (TElement, tattrs) {return Tattrs.templateurl | | Pageinittemplate.getpath (); }, Replace:true, scope: {pagedata: ' = ', prev: ' & ', Next: ' & ', L Oadpage: ' & '}, Link:function (scope, element, attrs) {Scope.on_prev = function () {if (s)
      Cope.prev) {Scope.prev ();
     }
     };
      Scope.on_next = function () {if (Scope.next) {scope.next ();
     }
     };
      Scope.on_loadpage = function (page) {scope.inpage = undefined;
      if (scope.loadpage) {scope.loadpage ({page:page});
    }
     };
  }
   };
   }]. Provider (' Pageinittemplate ', function () {var templatepath = ' template/pageinit/pageinit.html ';
   This.setpath = function (path) {templatepath = path;

   }; this. $get = function () {return {GETpath:function () {return templatepath;
   }
    };
  };
});

 ). Call (window);

2. Pagination Style control
the proposal is written in a separate. css file, first creating a new Pagesync.css file, and the following are the specific styles

. pagination-main {display:inline-block;
 padding-left:0;
 margin:0 0;
 border-radius:4px;
Vertical-align:middle;
 }. Pagination-main Li.prev-page > a {border:0; Pagination-main li.next-page > a {border:0;
 border-left:1px;
margin-left:0;
 }. Pagination-main Li.first-page > a {border-top-left-radius:0;
border-bottom-left-radius:0;
 }. Pagination-main Li.last-page > a {border-top-right-radius:0;
border-bottom-right-radius:0; }. Pagination-main Li div {width:80px;border:1px solid #DDDDDD; Background-color: #ffffff; float:left;padding:0; pa Gination-main li.skip-page input[type= ' text '] {width:24px;height:20px;border:0;text-align:center; pagination-mai n li.skip-page input[type= ' button '] {padding:0 4px 1px 10px;border:0;border-left:1px solid #dddddd Background-color:
 #ffffff}. Pagination-main Li.data-num > a {border:0;
margin-left:0; }. Pagination-main > li {display:inline}. pagination-main > Li:first-child >A,. Pagination-main > Li:first-child > span {/*margin-left:0;
 border-top-left-radius:4px; border-bottom-left-radius:4px;*/} pagination-main > Active > A,. pagination-main >. Active > Span,. pagina Tion-main > Active > A:hover,. pagination-main > Active > Span:hover,. pagination-main >. Active > A:f
 OCUs,. Pagination-main >. active > Span:focus {z-index:2;
 Color: #fff;
 Cursor:default;
 Background-color: #428bca;
Border-color: #428bca;
 }. Pagination-main > Li > A,. pagination-main > li > Span {position:relative;
 Float:left;
 /*padding:6px 12px;*/padding:1px 8px;
 Margin-left: -1px;
 line-height:1.42857143;
 Color: #428bca;
 Text-decoration:none;
 Background-color: #fff;
border:1px solid #ddd; Pagination-main > Disabled > Span,. pagination-main > Disabled > Span:hover,. pagination-main >. Disab Led > Span:focus,. pagination-main > Disabled > A,. pagination-main > Disabled &Gt
 A:hover,. Pagination-main > Disabled > A:focus {color: #999;
 cursor:not-allowed;
 Background-color: #fff;
Border-color: #ddd;

 }

3. Paging Query method
I have customized the method of paging query in factory, common use, convenient code maintenance. In angular interaction with the background of the default is asynchronous, I write here as a synchronous query, first of all, the definition of JS file pageSync.service.js, the following is the entire content of factory:

' Use strict ';
 Angular.module (' app '). Factory (' Pagesync ', [' $http ', ' $q ', function Page ($http, $q) {var rowcollectionpage = [];
 var totalpage = 1;
 var pages = [];
 var endpage = 1; var load = function (URL, currentpage, pagesize,deferred) {var json = {rowcollectionpage: [], Totalpage:1, CurrentPage: CurrentPage?
  currentpage:1, Pages: []};
   $http. Get (URL). Success (function (rows) {rowcollectionpage = Setpagerow (rows.list, pageSize);
   Get total Pages totalpage = Math.ceil (rows.count/pagesize);
   EndPage = Totalpage;
   Generate a digital link if (totalpage <= 7) {pages = Getpageslow (totalpage);
   else {pages = Getpageshigh (currentpage, totalpage);
   } json.rowcollectionpage = Rowcollectionpage; Json.totalpage = totalpage==0?
   1:totalpage;
   Json.currentpage = CurrentPage;
   json.pages = pages;
   Json.count = Rows.Count;
   Json.pagesize = pageSize; /** * Custom field, initialization is before, as long as the paging method, the field value becomes after * before means that the paging method is not passed, after that after the paging method, * Foreground page loading rules: for beFore when the table has no data, for after and patadata.count==0 no data, otherwise considered to have data, * can also be said to record a time state (access to data before and after the return of data) * * * * json.loadtime = ' after ';
  Deferred.resolve (JSON);
  });
 return deferred.promise;
 };
  Total pages less than or equal to 7 o'clock Show all pages var getpageslow = function (totalpage) {var temp = [];
  for (var i=1; i<totalpage+1; i++) {Temp.push (i);
 return to temp;
 };
  Total pages greater than 7 o'clock get 7 page numbers based on current page var getpageshigh = function (CurrentPage, totalpage) {var temp = [];
  if (CurrentPage < 4) {temp = [1, 2, 3, 4, 5, ' ... ', totalpage];  else if ((totalpage-currentpage) <= 3) {temp = [totalPage-6, totalPage-5, totalPage-4, Totalpage
  -3, TotalPage-2, totalPage-1, Totalpage]; else {temp = [currentPage-2, currentPage-1, currentpage, CurrentPage + 1, currentpage + 2, ' ... ', total
  Page];
 return to temp;
 }; The height of the table in the project is based on the height of the browser window, dynamic//Because the page is pinned to the bottom of the table, no data is substituted for the var setpagerow = function (Rowarr, pageSize) {V
  AR temp = []; if (Rowarr!)= undefined) {for (var i = 0; i < rowarr.length; i++) {Temp.push (rowarr[i]);
   for (var j = 0; J < Pagesize-rowarr.length; J + +) {Temp.push ({});
   } else {for (var k = 0; k < pageSize; k++) {Temp.push ({});
 } return temp;
 };
   return {load:function (URL, currentpage, pageSize) {var deferred = $q. Defer ();
   url = + ' & ' + currentpage + ' & ' + pageSize;
  return load (URL, currentpage, pageSize, deferred);
   }, Next:function (URL, currentpage, pageSize) {var deferred = $q. Defer ();
   if (CurrentPage < endpage) {currentpage++;
   url = + ' & ' + currentpage + ' & ' + pageSize;
  return load (URL, currentpage, pageSize, deferred);
   }, Prev:function (URL, currentpage, pageSize) {var deferred = $q. Defer ();
   currentpage--;
   url = + ' & ' + currentpage + ' & ' + pageSize;
  return load (URL, currentpage, pageSize, deferred); }, Loadpage:function (URL, currentpage, pageSize, page) {var deferred = $q. Defer ();
    if (currentpage!= page) {currentpage = page;
    url = + ' & ' + currentpage + ' & ' + pageSize;
   return load (URL, currentpage, pageSize, deferred);

 }
  }
 }
}]);

4. Use of instructions

1). Code on the page:

Pagination in my code is written in the tfoot in the table, and Prev (), Next (), LoadPage (page) are defined in the corresponding controller of the page

<table> <thead> <tr> <th> serial number </th> <th> 1</th> <th> column name 2</th> <th style= "Width:150px;text-align:center;" > Operations </th> </tr> </thead> <tbody> <tr ng-if= "!notabledata" ng-repeat= "row in" Pagedata.rowcollectionpage "> <td>{{!! Row.id? $index +1+ (pagedata.currentpage-1) *pagesize: '}}</td> <td>{{row.args1}}</td> <td>{{ row.args2}}</td> <td style= "Text-align:center;" ><a href= ' # ' > Modify </a></td> </tr> <tr ng-if= "Notabledata" ng-repeat= "data in Pagedata.rowcollectionpage "> <td ng-if=" $index = = 0 "colspan=" 4 "style=" Text-align:center; " > No data! 
  </td> <td ng-if= "$index!= 0" colspan= "4" ></td> </tr> </tbody> <tfoot> <tr> &LT;TD style= "Text-align:center" colspan= "6" > <div> <page-init page-data= "Pagedata" prev= "prev ()" Next= "Next ()" Load-page= "LoadPage (PAGE) "></page-init> </div> </td> </tr> </tfoot> </table>

 

2). Code in Controller

First, refer to factory and refer to Pagesync in controller as follows:

Angular.module (' app '). Controller (' Myctrl ', function (Pagesync) {});

Do some preparatory work before paging the query:

Pagedata set of paging data sets, total pages, page numbers, total number of data, Loadtime for custom parameters to record time status (before and after data is accessed)
$scope. Pagedata = {rowcollectionpage: [], Totalpage:1, currentpage:1, pages: [],count:0, Loadtime: ' Before '};
This is used to calculate the height of the table, according to the actual situation.
$scope. tabheight = $scope. height-48-37-10-42-5;
Calculate how many rows of data are actually in a page
$scope. PageSize = parseint (($scope. tabheight-15-34-34-39)/34);

And then controller to write the following method

Paging query $scope. Load = function (row) {$scope. surgeonpagedata.rowcollectionpage = Common.setpagerow ([], $scope. pageSize)
 ;
 $scope. Nosurgeondata = false;
 $scope. Surgeonpagedata.loadtime = ' before ';
  Pagesync.load (URL, $scope. pagedata.currentpage, $scope. pageSize). Then (function (data) {$scope. pagedata = data;
   if ($scope. pagedata.loadtime== ' after ' && $scope. pagedata.count==0) | | $scope. pagedata.loadtime== ' before ') {
  $scope. Notabledata = true;
}
 });
}; The next page $scope. Next = function () {if ($scope. pagedata.currentpage < $scope. pagedata.totalpage) {pagesync.next (URL,
  $scope. Pagedata.currentpage, $scope. pageSize). Then (function (data) {$scope. pagedata = data;
 });
}
}; Previous page $scope. prev = function () {if ($scope. pagedata.currentpage > 1) {pagesync.prev (URL, $scope. pagedata.currentp
  Age, $scope. pageSize). Then (function (data) {$scope. pagedata = data;
 });
}
};
 Click the page number to jump $scope. loadpage = function (page) {$scope. inpage = undefined;
 var intpage; if (Typeof page = = ' String '} {if (page!= "") {intpage = parseint (page, 10);
  else {intpage = 0;
 } else {intpage = page; } if ($scope. Pagedata.totalpage <= 1) {} else if (intpage = undefined | | intpage = NULL) {alert (' Please fill in the jump page number!
 '); else if (intpage <= 0 | | intpage > $scope. pagedata.totalpage) {alert (' jump page number should be greater than 0, less than total pages ' + $scope. Pagedata.totalpage)
 ; else if ($scope. Pagedata.currentpage!= page) {pagesync.loadpage (URL, $scope. pagedata.currentpage, $scope. PageSize, P
  Age). Then (function (data) {$scope. pagedata = data;
 });

 }
};

5. The result
The final implementation effect is as follows:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.