Ich habe einen Datensatz mit ungefähr 1000 Elementen im Speicher und versuche, einen Pager für diesen Datensatz zu erstellen, bin mir jedoch nicht sicher, wie ich dies tun soll.
Ich verwende eine benutzerdefinierte Filterfunktion, um die Ergebnisse zu filtern, und das funktioniert gut, aber irgendwie muss ich die Anzahl der Seiten herausholen.
Irgendwelche Hinweise?
angularjs
pagination
Glimmer
quelle
quelle
Antworten:
Angular UI Bootstrap - Paginierungsrichtlinie
Check out UI Bootstrap ‚s Paginierung Richtlinie . Am Ende habe ich es eher verwendet als das, was hier veröffentlicht wird, da es über genügend Funktionen für meine aktuelle Verwendung verfügt und eine gründliche Testspezifikation enthält .
Aussicht
Regler
Ich habe einen funktionierenden Plunker als Referenz gemacht.
Legacy-Version:
Aussicht
Regler
Ich habe einen funktionierenden Plunker als Referenz gemacht.
quelle
pagination
Element festgelegt werden muss.Ich habe kürzlich Paging für die Site "Built with Angular" implementiert. Sie können die Quelle überprüfen : https://github.com/angular/builtwith.angularjs.org
Ich würde es vermeiden, einen Filter zum Trennen der Seiten zu verwenden. Sie sollten die Elemente innerhalb des Controllers in Seiten aufteilen.
quelle
Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
Ich musste einige Male mit Angular Paginierung implementieren, und es war immer ein bisschen schmerzhaft für etwas, von dem ich glaubte, dass es vereinfacht werden könnte. Ich habe einige der hier und anderswo vorgestellten Ideen verwendet, um ein Paginierungsmodul zu erstellen, das die Paginierung so einfach macht wie:
Das ist es. Es hat die folgenden Funktionen:
items
mit den Paginierungslinks zu verknüpfen.ng-repeat
, sodass Sie jeden Ausdruck verwenden können, der in einem gültig verwendet werden kannng-repeat
, einschließlich Filtern, Bestellen usw.pagination-controls
Direktive muss nichts über den Kontext wissen, in dem diepaginate
Direktive aufgerufen wird.Demo: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
Für diejenigen, die nach einer "Plug and Play" -Lösung suchen, finde ich das nützlich.
Code
Der Code ist hier auf GitHub verfügbar und enthält eine Reihe guter Tests:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
Wenn Sie interessiert sind, habe ich auch ein kurzes Stück mit etwas mehr Einblick in das Design des Moduls geschrieben: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/
quelle
Ich habe gerade eine JSFiddle erstellt, die Paginierung + Suche + Reihenfolge nach in jeder Spalte mit dem Btford-Code anzeigt: http://jsfiddle.net/SAWsA/11/
quelle
new_sorting_order
sollte seinnewSortingOrder
. Beheben Sie das, fügen Sie das hinzu@scope.search();
, und Sie werden sehen, dass die Dinge wie erwartet sortiert werden und die Sortiersymbole ebenfalls aktualisiert werden. (Führen Sie die Geige mit geöffneter Debugging-Konsole Ihres Browsers aus (in Chrome, F12, Registerkarte "Konsole"), und es ist offensichtlich).Ich habe Scotty.NETs plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview aktualisiert, sodass neuere Versionen von angle, angle -ui und bootstrap verwendet werden.
Regler
Bootstrap-UI-Komponente
quelle
Dies ist eine reine Javascript-Lösung, die ich als Angular-Dienst verpackt habe, um die Paginierungslogik wie in Google-Suchergebnissen zu implementieren.
Arbeitsdemo zu CodePen unter http://codepen.io/cornflourblue/pen/KVeaQL/
Details und Erklärungen in diesem Blogbeitrag
quelle
Ich habe hier die relevanten Bits extrahiert. Dies ist ein tabellarischer Pager ohne Schnickschnack, daher ist das Sortieren oder Filtern nicht enthalten. Fühlen Sie sich frei, nach Bedarf zu ändern / hinzuzufügen:
quelle
Unten Lösung ganz einfach.
Hier ist ein Beispiel für jsfiddle
quelle
Der jQuery Mobile-Winkeladapter verfügt über einen Paging-Filter, auf dem Sie basieren können.
Hier ist eine Demo-Geige, die sie verwendet (fügen Sie mehr als 5 Elemente hinzu und sie wird ausgelagert): http://jsfiddle.net/tigbro/Du2DY/
Hier ist die Quelle: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
quelle
Für alle, die es schwierig finden wie ich, einen Paginator für einen Tisch zu erstellen, poste ich dies. Also aus Ihrer Sicht:
In Ihren eckigen Js:
quelle
Ich verwende diese Paginierungsbibliothek von Drittanbietern und sie funktioniert gut. Es kann lokale / entfernte Datenquellen verarbeiten und ist sehr konfigurierbar.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
quelle
Seit Angular 1.4
limitTo
akzeptiert der Filter auch ein zweites optionales Argumentbegin
Aus den Dokumenten :
Sie müssen also keine neue Direktive erstellen . Mit diesem Argument können Sie den Versatz der Paginierung festlegen
quelle
Sie können dies einfach mit der Bootstrap-UI-Direktive tun.
Diese Antwort ist eine Änderung der Antwort von @ Scotty.NET. Ich habe den Code geändert, da die
<pagination>
Direktive jetzt veraltet ist.Der folgende Code generiert die Paginierung:
Verwenden Sie dies in Ihrem Controller, um es funktionsfähig zu machen:
Weitere Optionen für die Paginierung finden Sie hier: Paginierungsrichtlinie für die Bootstrap-Benutzeroberfläche
quelle
ng-wiederholte Paginierung
quelle
In früheren Nachrichten wurde grundsätzlich empfohlen, wie Sie ein Paging selbst erstellen können. Wenn Sie wie ich sind und eine fertige Direktive bevorzugen, habe ich gerade eine großartige gefunden, die ngTable heißt . Es unterstützt das Sortieren, Filtern und Paginieren.
Es ist eine sehr saubere Lösung, alles was Sie aus Ihrer Sicht brauchen:
Und im Controller:
Link zu GitHub: https://github.com/esvit/ng-table/
quelle
Angular-Paging
ist eine wunderbare Wahl
quelle
Alte Frage, aber da ich denke, dass mein Ansatz etwas anders und weniger komplex ist, werde ich dies teilen und hoffen, dass jemand außer mir es nützlich findet.
Was ich als einfache und kleine Lösung für die Paginierung empfunden habe, ist die Kombination einer Direktive mit einem Filter, der dieselben Bereichsvariablen verwendet.
Um dies zu implementieren, fügen Sie den Filter zum Array hinzu und fügen die Direktive wie folgt hinzu
p_Size und p_Step sind Bereichsvariablen, die im Bereich angepasst werden können. Andernfalls beträgt der Standardwert von p_Size 5 und p_Step 1.
Wenn ein Schritt in der Paginierung geändert wird, wird der p_Step aktualisiert und löst eine neue Filterung durch den cust_pagination-Filter aus. Der cust_pagination-Filter schneidet dann das Array in Abhängigkeit vom p_Step-Wert wie unten auf und gibt nur die im Paginierungsabschnitt ausgewählten aktiven Datensätze zurück
DEMO Sehen Sie sich die Komplettlösung in diesem Plunker an
quelle
Da ist mein Beispiel. Ausgewählte Schaltfläche in der Mitte der Liste Controller. config >>>
Logik für die Paginierung:
und meine Sicht auf Bootstap
Es ist nützlich
quelle
Ich wünschte, ich könnte einen Kommentar abgeben, aber ich muss das hier einfach belassen:
Die Antwort von Scotty.NET und die Wiederholung von user2176745 für spätere Versionen sind beide großartig, aber beide vermissen etwas, auf das meine Version von AngularJS (v1.3.15) verzichtet:
Ich bin nicht in $ scope.makeTodos definiert.
Das Ersetzen durch diese Funktion behebt sie daher für neuere Winkelversionen.
quelle
quelle
Ich möchte meine Lösung hinzufügen, die funktioniert,
ngRepeat
und Filter, die Sie damit verwenden, ohne ein$watch
oder ein in Scheiben geschnittenes Array zu verwenden.Ihre Filterergebnisse werden paginiert!
Stellen Sie im HTML sicher, dass Sie Ihre Filter auf den Filter
ngRepeat
vor dem Paginieren anwenden .quelle