Auf vielen Seiten des Projekts wird Pagination verwendet und jede Seite hat viele doppelte Paginierungscodes. Deshalb schrieb ich einen einfachen Paginierungsanweis, um den Seitencode zu vereinfachen und einfach zu warten. Ich habe es im Blog als Backup für den einfachen Zugang in der Zukunft geschrieben.
Hier sind die Schritte, um die Richtlinie und ihre Anwendung zu definieren:
1. Definition der Richtlinie
Definieren Sie eine JS-Datei, page-directive.js, die zum Schreiben von Paging-Anweisungscode verwendet wird. Diese Datei enthält die Paging -Vorlage. Im Folgenden finden Sie alle Codes in der JS -Datei:
'verwenden strict'; (function () {angular.module ('template/pageinit/pageinit.html', []). ng-class = "{deaktiviert: pagedata.currentPage == 1}">/n '+' <a href = "javaScript: void (0); "<a href =" JavaScript: void (0); " page == pagedata.totalpage} ">/n '+' <a ng-if =" page! }} </a>/n '+' <a ng-if = "page ==/'.../'" href = "javaScript: void (0);" ng-class = "{deaktiviert: pagedata.currentPage == pagedata.totalpage}">/n '+' <a href = "JavaScript: void (0); placeholder = "" ng-model = "inpage">/n '+' <Eingabe type = "button" value = "Jump" ng-klick = "on_loadPage (INPAGE)"> </div>/n '+' </li>/n '+' <li> <a href = " {{pagedata.count}} </span> </a> </li>/n '+' </ul>/n '+'); 'Ae', templateurl: function (telement, tattrs) {return tattrs.templateurl || if (scope.prev) {scope.prev (); }; }). Call (Fenster);2. Controllstil -Paginierungsstil
Es wird empfohlen, es in eine separate .css -Datei zu schreiben. Erstellen Sie zunächst eine neue Datei pageSync.css. Das Folgende ist der spezifische Stil.
.Pagination-Main {Anzeige: Inline-Block; Padding-Links: 0; Rand: 0 0; Border-Radius: 4px; Vertikal-Align: Middle;}. Pagination-Main Li.Prev-Page> A {Border: 0;}. Pagination-main li.Next-Page> a {Border: 0; Border-Links: 1PX; Rand-Links: 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 #ddddd; Hintergrundfarbe: #ffffffff; Mitte;}. Pagination-Main Li.skip-Page-Eingabe [type = 'button'] {padding: 0 4px 1px 10px; Grenze: 0; Border-Links: 1px Solid #dddddd; Hintergrund-Color: #ffffff} .Pagination-main li.data-num> a {{Border: 0; Rand-Links: 0;}. Pagination-Main> li {Anzeige: Inline;}. Pagination-Main> li: Erstkind> a, .pagination-main> li: First-Child> Span { /*Margin-Links: 0; Border-Top-Links-Radius: 4px; Border-Bottom-Left-Radius: .aktiv> A, .Pagination-Main> .aktiven> Spannweite,. Farbe: #fff; Cursor: Standard; Hintergrundfarbe: #428bca; Grenzfarbe: #428bca;}. Pagination-Main> li> a, .pagination-main> li> span {Position: relativ; float: links; /*Pagination: 6px 12px;*/ padding: 1px 8px; Rand -Links: -1px; Linienhöhe: 1.42857143; Farbe: #428bca; Textdekoration: Keine; Hintergrundfarbe: #fff; Grenze: 1PX Solid #ddd;}. Pagination-Main> .Disabled> Span: Hover, Pagination-Main> .Disabled> Span: Hover,. Pagination-Main> .Disabled> Span: Focus, .Pagination. Cursor: nicht verurteilt; Hintergrundfarbe: #fff; Grenzfarbe: #ddd;}3. Pagination Query -Methode
Ich habe die Methode der Paginierungsabfrage in Fabrik angepasst, die für die Code -Wartung gemeinsam genutzt und bequem ist. Die Wechselwirkung mit dem Hintergrund in Angular ist standardmäßig asynchron. Ich habe es hier als synchrone Abfrage geschrieben. Definieren Sie zunächst die JS -Datei pageSync.service.js. Das Folgende ist der gesamte Inhalt der Fabrik:
'strict'; angular.module ('app'). factory ('pageSync', ['$ http', '$ q', Funktionsseite ($ http, $ q) {var rowCollectionPage = []; var TotalPage = 1; var Pages = []; var endPage = var jon; {RowCollectionPage: [], TotalPage: 1, CurrentPage: CurrentPage? = TotalPage; JSON.SPAGE = PAGES; Es wird auch ein Zeitpunkt der Aufnahme und nach Rückgabe von Daten) i = 1; } else if (TotalPage - CurrentPage) <= 3) {temp = [Gesamtpage - 6, Gesamtpage - 5, Gesamtpage - 4, Gesamtpage - 3, TotalPage - 2, TotalPage - 1, TotalPage]; }; temp.push (rowarr [i]); pagesze) {var deferred = $ q.defer (); '&' + CurrentPage + '&' + PageSize; Loadpage: Funktion (URL, CurrentPage, PageSize) {var deferred = $ q.Defer ();4. Verwenden Sie Befehle
1). Code auf der Seite:
In meinem Code ist die Seite im TFoot in der Tabelle geschrieben. Prev (), Next () und LoadPage (Seite) sind alle Methoden, die im entsprechenden Controller der Seite definiert sind.
<table> <Thead> <tr> <Th> Seriennummer </th> <th> Spaltenname 1 </th> <Th> Spaltenname 2 </th> <th> Operation </th> </tr> </thead> <tbody> <tr ng-if = "! $ INDEX+1+(pagedata.currentPage-1)*pageSize: ''}} </td> <td> {{row.args1}} </td> <td> {{{row.args2}} </td> <td> {{row.args2}}}}} {td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td Mitte; "> <a href = '#'> modify </a> </td> </tr> <tr ng-if =" perbabledata "ng-repeat =" Daten in paceedata.rowcollectionPage "> <td ng-if =" $ index == 0 "colspan =" 4 "style =" text-align: " </td> <td ng-if = "$ index! colspan = "6"> <div> <page-init page-data = "pagedata" prev = "prev ()" next = "next ()" load-Page = "loadPage (Seite)"> </page-init> </div> </td> </td> </tr> </tfoot> </table> </table> </td> </td> </tol> </tfoot> </table> </table> </td> </td> </thex </tfoot> </table> </table> </td> </td> </table> </table> </tabelle>2) .code im Controller
Zunächst müssen Sie sich wie folgt auf die Fabrik- und Referenzpagesync im Controller verweisen:
Angular.module ('App'). Controller ('myctrl', function (pageSync) {});
Vor der Pagination -Abfrage müssen Sie einige Vorbereitungen durchführen:
// pageedata legt den Seitendatensatz, die Gesamtzahl der Seiten, die Seitenzahl und die Gesamtzahl der Daten fest. LoadTime ist ein benutzerdefinierter Parameter, um den Zeitstatus aufzuzeichnen (bevor Sie auf Daten zugreifen und nach der Rückgabe von Daten).
$ scope.pagedata = {rowCollectionPage: [], Gesamtseite: 1, CurrentPage: 1, Seiten: [], Graf: 0, Loadtime: 'vor'};
// Dies wird verwendet, um die Höhe der Tabelle gemäß der tatsächlichen Situation zu berechnen.
$ scope.tabheight = $ scope.height-48-37-10-42-5;
// Berechnen Sie, wie viele Datenzeilen tatsächlich auf einer Seite sind
$ scope.pageSize = parseInt (($ scope.tabheight-15-34-34-39)/34);
Schreiben Sie dann die folgende Methode in den Controller
// Pagination Query $ scope.load = function (row) {$ scope.surgeonpagedata.rowCollectionPage = Common.setPagerow ([], $ scope.pageSize); $ scope.nosurgeondata = false; $ scope.surgeonpagedata.loadTime = 'vor'; PageSync.load (URL, $ scope.pagedata.currentPage, $ scope.pageSize) .Then (function (data) {$ scope.pagedata = data; if ($ scope.pagedata.loadtime == 'After' && $ scope.pagedata.Count == 0) || $ $ scope.paged.pagedata.- $ scope.notabledata = true; $ scope.pagedata = Daten; }}; // Vorherige Seite $ scope.prev = function () {if ($ scope.pagedata.currentPage> 1) {pageSync.prev (url, $ scope.pagedata.currentPage, $ scope.pagesize) .Wen (Funktion (function }}; // Klicken Sie auf die Seitennummer, um $ scope.loadPage = Funktion (Seite) {$ scope.inpage = undefined; var intpage; if (typeof page == 'string') {if (Seite! = "") {intpage = parseInt (Seite, 10); } else {intpage = 0; }} else {intpage = page; } if ($ scope.pagedata.totalPage <= 1) {} else if (intpage == undefined || intpage == null) {alert ('Bitte füllen Sie die Sprung -Seitennummer aus!'); } else if (intpage <= 0 || intpage> $ scope.pagedata.totalPage) {alert ('Die Sprungseite sollte größer als 0 sein, weniger als die Gesamtzahl der Seiten'+$ scope.pagedata.totalpage); } else if ($ scope.pagedata.currentPage! = page) {pageSync.loadPage (URL, $ scope.pagedata.currentPage, $ scope.pageSize, Seite) .Then (function (data) {$ scope.pagedata = data;}); }};5. Ergebnisse
Der endgültige Implementierungseffekt ist wie folgt:
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.