Mam w pamięci zestaw danych zawierający około 1000 elementów i próbuję utworzyć pager dla tego zestawu danych, ale nie jestem pewien, jak to zrobić.
Używam niestandardowej funkcji filtrowania do filtrowania wyników, i to działa dobrze, ale jakoś muszę uzyskać liczbę stron.
Jakieś wskazówki?
angularjs
pagination
Miki
źródło
źródło
Odpowiedzi:
Angular UI Bootstrap - dyrektywa do paginacji
Sprawdź UI Bootstrap „s dyrektywę paginacji . Skończyło się na tym, że użyłem go, a nie tego, co tu zamieszczono, ponieważ ma wystarczającą liczbę funkcji do mojego obecnego użycia i ma dokładną specyfikację testu, aby mu towarzyszyć.
Widok
Kontroler
Zrobiłem działającego plunkera dla odniesienia.
Starsza wersja:
Widok
Kontroler
Zrobiłem działającego plunkera dla odniesienia.
źródło
pagination
elemencie.Niedawno wdrożyłem stronicowanie dla witryny Built with Angular. Możesz kasować źródło: https://github.com/angular/builtwith.angularjs.org
Unikałbym używania filtra do oddzielania stron. Powinieneś podzielić elementy na strony w kontrolerze.
źródło
Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
Kilkakrotnie musiałem wdrożyć paginację za pomocą Angulara i zawsze było to trochę uciążliwe dla czegoś, co moim zdaniem można uprościć. Wykorzystałem niektóre z pomysłów przedstawionych tutaj i gdzie indziej, aby stworzyć moduł stronicowania, który czyni paginację tak prostą jak:
Otóż to. Ma następujące funkcje:
items
z linkami stronicowania.ng-repeat
, abyś mógł użyć dowolnego wyrażenia, które może być poprawnie użyte wng-repeat
, w tym filtrowania, porządkowania itp.pagination-controls
dyrektywa nie musi nic wiedzieć na temat kontekstu, w którympaginate
dyrektywa jest wywoływana.Demo: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
Dla tych, którzy szukają rozwiązania typu „plug and play”, myślę, że okaże się to przydatne.
Kod
Kod jest dostępny tutaj na GitHub i zawiera całkiem niezły zestaw testów:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
Jeśli jesteś zainteresowany, napisałem również krótki kawałek z nieco większym wglądem w projekt modułu: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/
źródło
Właśnie utworzyłem JSFiddle, który pokazuje podział na strony + wyszukiwanie + porządkowanie według każdej kolumny za pomocą kodu btford: http://jsfiddle.net/SAWsA/11/
źródło
new_sorting_order
powinien byćnewSortingOrder
. Napraw to, dodaj@scope.search();
, a zobaczysz, że rzeczy są sortowane zgodnie z oczekiwaniami, a ikony sortowania również się aktualizują. (Uruchom skrzypce przy otwartej konsoli debugowania przeglądarki (w chrome, F12, karta konsoli) i jest to oczywiste).Zaktualizowałem plunkr Scotty.NET http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview, aby korzystał z nowszych wersji angular, angular -ui i bootstrap.
Kontroler
Komponent interfejsu użytkownika Bootstrap
źródło
Jest to czyste rozwiązanie JavaScript, które zapakowałem jako usługę Angular, aby zaimplementować logikę paginacji, tak jak w wynikach wyszukiwania Google.
Działające demo na CodePen pod adresem http://codepen.io/cornflourblue/pen/KVeaQL/
Szczegóły i wyjaśnienia na tym blogu
źródło
Wyodrębniłem tutaj odpowiednie fragmenty. Jest to pager tabelaryczny „bez fanaberii”, więc sortowanie lub filtrowanie nie jest uwzględnione. W razie potrzeby możesz zmieniać / dodawać:
źródło
Poniżej rozwiązanie dość proste.
Oto przykładowy plik jsfiddle
źródło
Adapter kątowy jQuery Mobile ma filtr stronicowania, na którym można bazować.
Oto skrzypka demonstracyjna, która z niej korzysta (dodaj więcej niż 5 elementów i zostanie stronicowana): http://jsfiddle.net/tigbro/Du2DY/
Oto źródło: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
źródło
Dla każdego, kto ma trudności z utworzeniem paginatora dla stołu, zamieszczam to. Twoim zdaniem:
W swoim angularJs:
źródło
Korzystam z tej biblioteki stronicowania innej firmy i działa ona dobrze. Może robić lokalne / zdalne źródła danych i jest bardzo konfigurowalny.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
źródło
Od wersji Angular 1.4
limitTo
filtr akceptuje również drugi opcjonalny argumentbegin
Z dokumentów :
Nie musisz więc tworzyć nowej dyrektywy. Tego argumentu można użyć do ustawienia przesunięcia stronicowania
źródło
Możesz to łatwo zrobić za pomocą dyrektywy Bootstrap UI.
Ta odpowiedź jest modyfikacją odpowiedzi udzielonej przez @ Scotty.NET, zmieniłem kod, ponieważ
<pagination>
dyrektywa jest już nieaktualna.Poniższy kod generuje paginację:
Aby to działało, użyj tego w swoim kontrolerze:
Więcej informacji na temat paginacji znajduje się w: Bootstrap UI Pagination Directive
źródło
powtarzanie stron
źródło
Poprzednie wiadomości w zasadzie zalecały samodzielne tworzenie stronicowania. Jeśli jesteś podobny do mnie i wolisz skończoną dyrektywę, właśnie znalazłem świetną o nazwie ngTable . Obsługuje sortowanie, filtrowanie i paginację.
Jest to bardzo czyste rozwiązanie, wszystko, czego potrzebujesz, według Twojego widoku:
I w kontrolerze:
Link do GitHub: https://github.com/esvit/ng-table/
źródło
Stronicowanie kątowe
to wspaniały wybór
źródło
Stare pytanie, ale ponieważ uważam, że moje podejście jest nieco inne i mniej złożone, podzielę się tym i mam nadzieję, że ktoś poza mną okaże się przydatny.
To, co uznałem za łatwe i małe rozwiązanie podziału na strony, to połączenie dyrektywy z filtrem, który używa tych samych zmiennych zakresu.
Aby to zaimplementować, dodajesz filtr do tablicy i dodajesz dyrektywę w ten sposób
p_Size i p_Step są zmiennymi zakresu, które można dostosować w zakresie, w przeciwnym razie domyślna wartość p_Size to 5, a p_Step to 1.
Gdy zmienia się krok w paginacji, p_Step jest aktualizowany i wyzwala nowe filtrowanie według filtra cust_pagination. Filtr cust_pagination wycina następnie tablicę w zależności od wartości p_Step, jak poniżej, i zwraca tylko aktywne rekordy wybrane w sekcji stronicowania
DEMO Zobacz kompletne rozwiązanie w tym dziale
źródło
Oto mój przykład. Wybrany przycisk pośrodku na liście Kontroler. config >>>
Logika stronicowania:
i mój pogląd na bootstap
To jest użyteczne
źródło
Chciałbym móc komentować, ale muszę to zostawić tutaj:
Odpowiedzi Scotty.NET i ponowne wykonanie user2176745 dla późniejszych wersji są świetne, ale w obu brakuje czegoś, co psuje moja wersja AngularJS (v1.3.15):
nie jest zdefiniowany w $ scope.makeTodos.
W związku z tym zastąpienie tą funkcją naprawia ją dla nowszych wersji kątowych.
źródło
źródło
Chciałbym dodać moje rozwiązanie, które działa z
ngRepeat
filtrami, których używasz bez użycia$watch
tablicy lub plastra.Twoje wyniki filtrów zostaną podzielone na strony!
W kodzie HTML upewnij się, że zastosujesz filtry do filtra
ngRepeat
przed paginacją.źródło