Saya memiliki dataset sekitar 1000 item dalam memori dan saya mencoba membuat pager untuk dataset ini, tetapi saya tidak yakin bagaimana cara melakukannya.
Saya menggunakan fungsi filter khusus untuk memfilter hasil, dan itu berfungsi dengan baik, tapi entah bagaimana saya perlu mengeluarkan jumlah halaman.
Ada petunjuk?
angularjs
pagination
Micael
sumber
sumber
Jawaban:
Bootstrap UI Sudut - Petunjuk Pagination
Periksa UI Bootstrap 's pagination direktif . Saya akhirnya menggunakannya daripada apa yang diposting di sini karena memiliki fitur yang cukup untuk penggunaan saya saat ini dan memiliki spesifikasi tes menyeluruh untuk menyertainya.
Melihat
Pengendali
Saya telah membuat plunker yang berfungsi sebagai referensi.
Versi Warisan:
Melihat
Pengendali
Saya telah membuat plunker yang berfungsi sebagai referensi.
sumber
pagination
elemen.Saya baru-baru ini menerapkan paging untuk situs Built with Angular. Anda dapat memeriksa sumbernya: https://github.com/angular/builtwith.angularjs.org
Saya akan menghindari menggunakan filter untuk memisahkan halaman. Anda harus memecah item menjadi halaman di dalam pengontrol.
sumber
Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
Saya harus menerapkan pagination beberapa kali dengan Angular, dan itu selalu sedikit menyusahkan untuk sesuatu yang saya rasa bisa disederhanakan. Saya telah menggunakan beberapa ide yang disajikan di sini dan di tempat lain untuk membuat modul pagination yang membuat pagination sesederhana:
Itu dia. Ini memiliki beberapa fitur berikut:
items
ke tautan pagination.ng-repeat
, sehingga Anda dapat menggunakan ekspresi apa pun yang dapat digunakan secara sah dalamng-repeat
, termasuk pemfilteran, pemesanan dll.pagination-controls
arahan tidak perlu tahu apa-apa tentang konteks di manapaginate
arahan tersebut dipanggil.Demo: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
Bagi mereka yang mencari solusi "plug and play", saya pikir Anda akan menemukan ini berguna.
Kode
Kode ini tersedia di GitHub dan mencakup serangkaian tes yang cukup baik:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
Jika Anda tertarik, saya juga menulis artikel pendek dengan sedikit lebih banyak wawasan tentang desain modul: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/
sumber
Saya baru saja membuat JSFiddle yang menunjukkan pagination + search + order pada setiap kolom menggunakan kode btford: http://jsfiddle.net/SAWsA/11/
sumber
new_sorting_order
seharusnyanewSortingOrder
. Perbaiki itu, tambahkan@scope.search();
, dan Anda akan melihat hal-hal seperti yang diharapkan, dan ikon mengurutkan juga. (Jalankan biola dengan konsol debugging browser Anda terbuka (di chrome, F12, tab konsol) dan itu sudah jelas).Saya memperbarui Scotty.NET's plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview sehingga menggunakan versi terbaru dari angular, angular-ui, dan bootstrap.
Pengendali
Komponen UI Bootstrap
sumber
Ini adalah solusi javascript murni yang telah saya bungkus sebagai layanan Angular untuk menerapkan logika pagination seperti di hasil pencarian google.
Demo yang sedang berjalan pada CodePen di http://codepen.io/cornflourblue/pen/KVeaQL/
Detail dan penjelasan di posting blog ini
sumber
Saya telah mengekstrak bit yang relevan di sini. Ini adalah pager tabel 'tanpa embel-embel', jadi penyortiran atau penyaringan tidak termasuk. Jangan ragu untuk mengubah / menambah sesuai kebutuhan:
sumber
Solusi di bawah ini cukup sederhana.
Berikut adalah contoh jsfiddle
sumber
Adaptor sudut jQuery Mobile memiliki filter paging yang dapat Anda gunakan.
Berikut demo biola yang menggunakannya (tambahkan lebih dari 5 item dan itu menjadi halaman): http://jsfiddle.net/tigbro/Du2DY/
Inilah sumbernya: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
sumber
Bagi siapa saja yang merasa kesulitan seperti saya untuk membuat paginator untuk tabel saya memposting ini. Jadi, menurut Anda:
Di sudut Anda:
sumber
Saya menggunakan perpustakaan pagination pihak ke-3 ini dan berfungsi dengan baik. Ia dapat melakukan sumber data lokal / jarak jauh dan sangat dapat dikonfigurasi.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
sumber
Sejak Angular 1.4,
limitTo
filter juga menerima argumen opsional keduabegin
Dari dokumen :
Jadi Anda tidak perlu membuat arahan baru , argumen ini dapat digunakan untuk mengatur offset pagination
sumber
Anda dapat dengan mudah melakukan ini menggunakan direktif UI Bootstrap.
Jawaban ini adalah modifikasi dari jawaban yang diberikan oleh @ Scotty.NET, saya telah mengubah kode karena
<pagination>
direktif sudah ditinggalkan sekarang.Kode berikut menghasilkan pagination:
Untuk membuatnya berfungsi, gunakan ini di controller Anda:
Lihat ini untuk lebih banyak opsi pagination: Bootstrap UI Pagination Directive
sumber
ng-ulangi pagination
sumber
Pesan sebelumnya pada dasarnya merekomendasikan cara membuat paging sendiri. Jika Anda seperti saya, dan lebih memilih arahan jadi, saya baru saja menemukan yang hebat bernama ngTable . Ini mendukung penyortiran, penyaringan dan pagination.
Ini adalah solusi yang sangat bersih, yang Anda butuhkan dalam pandangan Anda:
Dan di controller:
Tautan ke GitHub: https://github.com/esvit/ng-table/
sumber
Paging sudut
adalah pilihan yang bagus
sumber
Pertanyaan lama tetapi karena saya pikir pendekatan saya sedikit berbeda dan kurang kompleks, saya akan membagikan ini dan berharap bahwa seseorang selain saya merasa berguna.
Apa yang saya temukan sebagai solusi yang mudah dan kecil untuk pagination adalah menggabungkan direktif dengan filter yang menggunakan variabel lingkup yang sama.
Untuk menerapkan ini, Anda tambahkan filter pada array dan tambahkan direktif seperti ini
p_Size dan p_Step adalah variabel lingkup yang dapat dikustomisasi dalam ruang lingkup lain nilai default p_Size adalah 5 dan p_Step adalah 1.
Ketika langkah diubah dalam pagination, p_Step diperbarui dan akan memicu penyaringan baru dengan filter cust_pagination. Filter cust_pagination kemudian mengiris array tergantung pada nilai p_Step seperti di bawah ini dan hanya mengembalikan catatan aktif yang dipilih di bagian pagination
DEMO Lihat solusi lengkap dalam plunker ini
sumber
Ada contoh saya. Tombol yang dipilih di tengah daftar Controller. konfigurasi >>>
Logika untuk pagination:
dan pandangan saya saat bootstap
Ini berguna
sumber
Saya berharap bisa berkomentar, tapi saya harus meninggalkan ini di sini:
Jawaban Scotty.NET dan ulangan user2176745 untuk versi yang lebih baru sama-sama bagus, tetapi mereka berdua melewatkan sesuatu yang versi AngularJS (v1.3.15) saya hancurkan:
saya tidak didefinisikan dalam $ scope.makeTodos.
Dengan demikian, mengganti dengan fungsi ini memperbaikinya untuk versi sudut yang lebih baru.
sumber
sumber
Saya ingin menambahkan solusi saya yang berfungsi dengan
ngRepeat
dan memfilter yang Anda gunakan tanpa menggunakan$watch
atau irisan array.Hasil filter Anda akan diberi nomor halaman!
Dalam HTML pastikan Anda menerapkan filter Anda ke
ngRepeat
sebelum filter pagination.sumber