Dans de nombreuses pages du projet, la pagination est utilisée et chaque page a de nombreux codes de pagination en double. J'ai donc écrit une instruction de pagination simple pour simplifier le code de la page et être facile à entretenir. Je l'ai écrit dans le blog en tant que sauvegarde pour un accès facile à l'avenir.
Voici les étapes pour définir la directive et son application:
1. Définition de directive
Définissez un fichier JS, Page-Directive.js, qui est utilisé pour écrire le code d'instructions de pagination. Ce fichier contient le modèle de pagination. Voici tous les codes du fichier JS:
'utiliser strict'; (function () {angular.module ('template / pageinit / pageinit.html', []). run (['$ templatecache', function ($ templatecache) {$ templatecache.put ('template / pagein / pageinit.html', '<ul> / n' + '<li <li ng-class = "{handicap: pagedata.currentPage == 1}"> / n '+' <a href = "javascrip } "> / n '+' <a href =" javaScript: void (0); "ng-click =" on_prev () "> <span> </span> </a> / n '+' </li> / n '+' <li ng-repeat =" Page dans pagedata.pages "ng-class =" {/ 'premier-page /': Page == 1, / 'Last-Page /': page == Pagedata.TotalPage} "> / n '+' <a ng-if =" page! = / '... /' "href =" JavaScript: void (0); "ng-class =" {/ 'bg-custom /': page == PagedPage, tabData) "> {{page}} </a> / n '+' <a ng-if =" page == / '... /' "href =" javascript: void (0); "ng-Class =" {/ 'bg-custom /': page == pagedata.currentpage} "ng-Click =" "> {{PAGE }} </a> / n '+' </li> / n '+' <li ng-class = "{Disable </li> / n '+' <li> <div> <input type = "text" placeholder = "" ng-model = "inpage"> / n '+' <input type = "Button" value = "Jump" ng-click = "on_loadpage (inpage)"> </ div> / n '+' </li> / n '+' <li> <a href = ""> <pander> {{Pagedata.Count}} </span> </a> </li> / n '+' </ul> / n '+');}]); 'Ae', templateUrl: function (tection, tattrs) {return tattrs.TemplateUrl || if (scope.prev) {scope.prev ();}}; };}};}};}}]) .provider (' };});}). Call (fenêtre);2. Contrôle du style de pagination
Il est recommandé de l'écrire dans un fichier .css séparé. Créez d'abord un nouveau fichier pagesync.css. Ce qui suit est le style spécifique.
.Pagination-main {affichage: bloc en ligne; padding-gauche: 0; marge: 0 0; Border-Radius: 4px; Vertical-Align: Middle;}. Pagination-main li.prev-page> a {border: 0;}. pagination-main li.next-page> a {border: 0; bordure-gauche: 1px; marge-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-droite-radius: 0;}. Pagination-main li div {width: 80px; border: 1px solide #dddddd; background-Color: #ffffff; float: Left; padding: 0;}. Pagination-main li.skip-pages entrée [type = 'text'] {largeur: 24px; high: 20px; border: 0; Text '] Center;}. Pagination-main li.skip-page entrée [Type = 'Button'] {Padding: 0 4px 1px 10px; Border: 0; Border-Left: 1px solide #dddddd; Background-Color: #ffffff} .pagination-main li.data-num> a {border: 0; marge-left: 0;}. Pagination-main> li {affichage: inline;}. pagination-mus> li: premier-enfant> a, .pagination-main> li: premier-enfant> span {/ * margin-left: 0; Border-top-left-radius: 4px; Border-Bottom-left-radius: .active> a, .pagination-main> .active> span, .pagination-main> .active> a: hover, .pagination-main> .active> span: hover, .pagination-main> .acination> a: focus, .pagination-main> .active> a: focus, .pagination-musage> .cactive> span: focus {z-index: 2; Couleur: #FFF; curseur: par défaut; Color d'arrière-plan: # 428BCA; Border-Color: # 428BCA;}. Pagination-main> li> a, .pagination-main> li> span {position: relative; flottant: à gauche; / * Pagination: 6px 12px; * / padding: 1px 8px; marge-gauche: -1px; Heure de ligne: 1.42857143; Couleur: # 428BCA; Décoration du texte: aucune; Color d'arrière-plan: #FFF; Border: 1px solide #ddd;}. Pagination-main> .Disabled> span: hover, .pagination-main> .disabled> span: hover, .pagination-main> .disabled> span: focus, .pagination-main> .disabled> a, .pagination-manain> .disabled> a: hover,. curseur: non allongé; Color d'arrière-plan: #FFF; Border-Color: #ddd;}3. Méthode de requête de pagination
J'ai personnalisé la méthode de la requête de pagination en usine, qui est partagée et pratique pour la maintenance du code. L'interaction avec l'arrière-plan en angulaire est asynchrone par défaut. Je l'ai écrit comme une requête synchrone ici. Définissez d'abord le fichier js pagesync.service.js. Ce qui suit est l'intégralité du contenu de l'usine:
'Utiliser Strict'; angular.module ('app'). Factory ('PageSync', ['$ http', '$ q', page de fonction ($ http, $ q) {var rowcollectionpage = []; var totalpage = 1; var pages = []; var endpage = 1; var charge = fonction (url, actuel, pages = pages, defrer) {Var jon = fonction (url, actuel, pages = pages {RowCollectionPage: [], TotalPage: 1, CurrentPage: CurrentPage? EndPage = TotalPage; JSON.Pages = pages; Il est considéré comme des données. i = 1; i <totalPage + 1; (TotalPage - CurrentPage) <= 3) {Temp = [TotalPage - 6, TotalPage - 5, TotalPage - 4, TotalPage - 3, [CurrentPage - 2, CurrentPage - 1, CurrentPage, CurrentPage + 1, CurrentPage + 2, '... Le tableau du projet est calculé en fonction de la hauteur de la fenêtre du navigateur et est dynamique // Parce que la page doit être fixée en bas du tableau, utilisez des lignes vides pour aucune donnée au lieu de var setPagerOW = fonction (Rowarr, PageSize) {var temp = []; (var j = 0; j <pagesize - rowarr.length; j ++) {temp.push ({}); + = '+ CurrentPage +' & '+ pagesize; CurrentPage, PageSize, différé);}, Fonction: URL, CurrentPage, PageSize) {var Deferred = $ Q.Defer (); Deferred = $ q.defer ();4. Utiliser les commandes
1). Code sur la page:
Dans mon code, la page est écrite dans le TFOOT dans le tableau. Prev (), next () et loadpage (page) sont toutes des méthodes définies dans le contrôleur correspondant de la page.
<Bile> <Thead> <Tr> <Th> Numéro de série </th> <th> Nom de la colonne 1 </ TH> <TH> Nom de la colonne 2 </ Th> <Th> Opération </ Th> </tr> </ Thead> <Tbody> <tr ng-if = "! Notabledata" ng-repeat = "Row in. $ index + 1 + (pagedata.currentPage-1) * PageSize: ''}} </td> <td> {{row.args1}} </td> <td> {{row.args2}} </ td> <td> {{row.args2}} </td> Centre; "> <a href = '#'> Modifier </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> <td style = "text-adign: Center;" colspan = "6"> <div> <page-initit page-data = "pagedata" prev = "prev ()" next = "next ()" load-page = "loadPage (page)"> </ page-init> </div> </td> </td> </tr> </tfoot> </swear>2). Code dans le contrôleur
Tout d'abord, vous devez référencer l'usine et référence PageSync dans le contrôleur, comme suit:
angular.module ('app'). Controller ('myctrl', function (pagesYnc) {});
Avant la question de la pagination, vous devez faire une certaine préparation:
// Pagedata définit l'ensemble de données de page, le nombre total de pages, le jeu de pages et le nombre total de données. Le temps de charge est un paramètre personnalisé pour enregistrer l'état de temps (avant d'accéder aux données et après les données renvoyées)
$ scope.pagedata = {RowCollectionPage: [], TotalPage: 1, CurrentPage: 1, Pages: [], Count: 0, Charge: 'Before'};
// Ceci est utilisé pour calculer la hauteur de la table, selon la situation réelle.
$ scope.tabheight = $ scope.height-48-37-10-42-5;
// Calculez le nombre de lignes de données sur une page
$ scope.pagesize = parseInt (($ scope.tabheight-15-34-34-39) / 34);
Ensuite, écrivez la méthode suivante dans le contrôleur
// Pagination Query $ scope.load = function (row) {$ scope.surgeonpagedata.rowCollectionPage = Common.SetPagerow ([], $ scope.pageSize); $ scope.nosurgeondata = false; $ scope.surgeonpagedata.loadtime = 'avant'; Pagesync.load (url, $ scope.pagedata.currentpage, $ scope.pageSize) .then (function (data) {$ scope.pagedata = data; if (($ scope.pagedata.loadtime == 'après' && $ scope.pagedata.count == 0) || $ Scope.pagedata. $ scope.notabledata = true;}});}; // page suivante $ scope.next = function () {if ($ scope.pagedata.currentPage <$ scope.pagedata.totalpage) $ scope.pagedata = données;}); }}; // page précédente $ scope.prev = function () {if ($ scope.pagedata.currentPage> 1) {pagesync.prev (url, $ scope.pagedata.currentPage, $ scope.pageSize) .then (function (data) {$ scope.pagedata = data;}); }}; // Cliquez sur le numéro de page pour sauter $ 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 ('Veuillez remplir le numéro de page de saut!'); } else if (intpage <= 0 || intpage> $ scope.pagedata.totalpage) {alert ('Le numéro de page de saut doit être supérieur à 0, inférieur au nombre total de pages' + $ scope.pagedata.totalpage); } else if ($ scope.pagedata.currentPage! = page) {pagesync.loadPage (url, $ scope.pagedata.currentPage, $ scope.pageSize, page) .then (function (data) {$ scope.pagedata = data;}); }};5. Résultats
L'effet de mise en œuvre finale est le suivant:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.