Bagaimana Menerapkan Pagination di Angular JS? [Dengan Contoh Praktis]

Sebelum kita melanjutkan untuk memahami cara kerja pagination di Angular JS dan bagaimana penerapannya dalam kerangka kerja itu, mari kita ambil langkah demi langkah dan mulai dengan membahas Angular JS dan pagination secara umum.

Apa itu Angular JS?

Angular JS adalah salah satu kerangka kerja struktural yang paling disukai untuk membuat aplikasi web dinamis. Hal ini memungkinkan pengembang untuk menggunakan HTML sebagai bahasa template, dan bahkan mengizinkan perluasan sintaks HTML untuk memungkinkan ekspresi yang jelas dan ringkas dari berbagai komponen aplikasi web.

Muncul dengan injeksi ketergantungan dan kemampuan pengikatan data untuk menghapus sebagian besar kode yang harus ditulis oleh pengembang. Semua ini terjadi di dalam browser, menjadikan Angular JS kerangka kerja yang dapat digunakan dengan mudah dengan hampir semua teknologi server.

Angular JS adalah kerangka kerja sumber terbuka yang memiliki beberapa kesamaan dengan JavaScript. Ini sebagian besar digunakan oleh pengembang untuk mengembangkan aplikasi yang perlu menampilkan semua konten, teks, dan grafik mereka dalam satu halaman. Namun, ini tidak berarti bahwa itu tidak dapat digunakan untuk membuat aplikasi multi-halaman.

Kami akan menjelaskan dalam posting ini bagaimana pagination membantu membagi konten menjadi lebih dari satu halaman tanpa mempengaruhi alur dan navigasi di antara faktor-faktor lainnya. Ini adalah kerangka kerja pengontrol tampilan model yang populer di seluruh dunia karena dua alasan yang sangat penting – ini berbasis Google, dan selalu mengikuti perkembangan tren terbaru. Mari kita sekarang mengalihkan fokus kita ke pagination.

Baca: Pertanyaan & Jawaban Wawancara AngularJS

Apa itu Pagination?

Seperti yang telah kami singgung sedikit sebelumnya, semua situs web tidak dapat menampilkan semua informasi mereka dalam satu halaman. Meskipun satu halaman memang merupakan pilihan yang lebih disukai, menggunakan beberapa halaman dalam situasi di mana satu halaman situs web bukan merupakan pilihan dapat memberikan beberapa manfaat, termasuk navigasi situs yang mudah, pengalaman pengguna yang lebih baik, dan lain-lain.

Semua situs web, terutama situs web eCommerce seperti Flipkart, tidak dapat mencantumkan semua produk mereka dan menampilkan semua informasi yang diperlukan dalam satu halaman. Di sinilah pagination masuk ke dalam gambar. Ini memungkinkan konten, dalam bentuk teks, gambar, dan lainnya, untuk dipecah menjadi beberapa halaman jika diperlukan. Pelajari lebih lanjut tentang menggunakan AngularJS untuk pengembangan web.

Ada beberapa skenario di mana pagination sangat berguna. Jika situs web Anda menampilkan banyak informasi, termasuk blog, grafik, atau bagan yang berkaitan dengan kategori atau kumpulan data serupa, Anda dapat membagi informasi ini menggunakan pagination dan meningkatkan navigasi dan keterbacaan.

Paginasi di Angular JS

Ada beberapa cara untuk menampilkan data di situs web atau aplikasi web apa pun. Daftar dan tabel adalah elemen paling umum yang digunakan kebanyakan orang untuk menampilkan informasi yang mudah dibaca dan dipahami. Dalam aplikasi Angular, fitur ng-repeat digunakan untuk menampilkan informasi dalam daftar atau tabel. Namun, ini hanya berfungsi jika data yang ditampilkan tidak terlalu besar. Untuk kumpulan data yang lebih besar, fitur seperti pengurutan, pencarian, dan penomoran halaman membuat tabel dan daftar lebih mudah dikelola dan aplikasi lebih ramah pengguna.

Pagination JS sudut mungkin tampak lebih sulit daripada pagination di Laravel, Code PHP, dan kerangka kerja lain untuk orang-orang yang tidak terlalu menyadari pendekatan implementasi yang perlu diikuti. Anda dapat menggunakan pagination bersama dengan fitur pencarian dan pengurutan untuk membuat daftar catatan dalam format yang mudah dinavigasi dan mudah dibaca.

Anda dapat menggunakan perpustakaan sudut pihak ketiga untuk mencakup daftar sederhana menjadi beberapa halaman dengan fitur pengurutan dan pencarian. Pustaka pihak ketiga yang paling disukai untuk tujuan ini adalah dirPagination. Perpustakaan ini mudah diakses dan sangat mudah digunakan. Ini dapat digunakan untuk versi sudut yang lebih rendah dari sudut 2. Jika Anda menggunakan sudut 2, Anda akan memisahkan komponen yang tersedia untuk Anda dalam perpustakaan internal untuk menambahkan pengurutan, pencarian, dan pagination.

Jika Anda ingin menampilkan lebih dari 200 record dan menggunakan, misalnya, angular 1.4, Anda akan menemukan library dirPagination lebih cepat daripada library sejenis lainnya dan juga berkinerja tinggi. Ini adalah pustaka plug-n-play yang tidak memerlukan Angular JS Controller untuk menjalankan logika apa pun atau mengatur perintah. Selain itu, ini bekerja dengan baik dengan Bootstrap juga.

Pagination di Angular JS dengan Contoh

Berikut kode untuk menampilkan pagination di Angular JS.

Sumber : ( https://Gist.github.com/kmaida/06d01f6b878777e2ea34 )

<!DOCTYPE HTML>

<html lang="en" ng-app="myApp">

<kepala>

<meta charset="utf-8″>

<title>Paging Dinamis dengan Pemfilteran</title>

<meta name=”viewport” content="width=device-width, initial-scale=1.0″>

<meta name=”deskripsi” konten=””>

<meta name=”penulis” content=”Kim Maida”>

<!– Perpustakaan JS ->

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js” type=”text/javascript”></script>

<script src=”http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js” type=”text/javascript”></script>

<!– Skrip Sudut ->

<script src="script.js" type="text/javascript"></script>

<!– Bootstrap ->

<link rel=”stylesheet” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />

</head>

<tubuh>

<div ng-controller="PageCtrl">

<div ng-controller="PageCtrl">

<label>Penelusuran:</label> <input type="text" ng-model="search.name" placeholder="Search" />

<br />

<label>Filter menurut Kategori:</label>

<ul>

<li><a href="” ng-click="search.category='engineering'”>Teknik</a></li>

<li><a href="” ng-click="search.category='management'”>Manajemen</a></li>

<li><a href="” ng-click="search.category='business'”>Bisnis</a></li>

</ul>

<label>Filter menurut Cabang:</label>

<ul>

<li><a href="” ng-click="search.branch='West'”>Barat</a></li>

<li><a href="” ng-click="search.branch='East'”>Timur</a></li>

</ul>

<p><strong><a href=”” ng-click=”resetFilters()”>Tampilkan Semua</a></strong></p>

<h1>Item</h1>

<ul>

<li ng-repeat=”item di filter = item | filter:cari | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit”>{{item.name}}</li>

</ul>

<pagination page=”currentPage” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>

</div>

</tubuh>

</html>

app.js (Sumber: https://Gist.github.com/kmaida/06d01f6b878777e2ea34)

var app = angular.module('myApp', ['ui.bootstrap']);

app.filter('mulaiDari', fungsi () {

mengembalikan fungsi (input, mulai) {

jika (masukan) {

mulai = +mulai;

kembali input.slice(mulai);

}

kembali [];

};

});

app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {

$lingkup.item = [{

“nama”: “nama 1”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Barat"

}, {

“nama”: “nama 2”,

“kategori”: [{

"kategori": "rekayasa"

}],

"cabang": "Barat"

}, {

“nama”: “nama 3”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "rekayasa"

}],

"cabang": "Barat"

}, {

“nama”: “nama 4”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Barat"

}, {

“nama”: “nama 5”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

“nama”: “nama 6”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

“nama”: “nama 7”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

“nama”: “nama 8”,

“kategori”: [{

"kategori": "bisnis"

}],

"cabang": "Barat"

}, {

“nama”: “nama 9”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

“nama”: “nama 10”,

“kategori”: [{

"manajemen kategori"

}],

"cabang": "Timur"

}, {

“nama”: “nama 11”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

“nama”: “nama 12”,

“kategori”: [{

"kategori": "rekayasa"

}],

"cabang": "Barat"

}, {

“nama”: “nama 13”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Barat"

}, {

“nama”: “nama 14”,

“kategori”: [{

"kategori": "rekayasa"

}],

"cabang": "Timur"

}, {

“nama”: “nama 15”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "rekayasa"

}],

"cabang": "Timur"

}, {

“nama”: “nama 16”,

“kategori”: [{

"manajemen kategori"

}],

"cabang": "Barat"

}, {

“nama”: “nama 17”,

“kategori”: [{

"manajemen kategori"

}],

"cabang": "Timur"

}, {

“nama”: “nama 18”,

“kategori”: [{

"kategori": "bisnis"

}],

"cabang": "Barat"

}, {

“nama”: “nama 19”,

“kategori”: [{

"kategori": "bisnis"

}],

"cabang": "Barat"

}, {

“nama”: “nama 20”,

“kategori”: [{

"kategori": "rekayasa"

}],

"cabang": "Timur"

}, {

"nama": "Petrus",

“kategori”: [{

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

"nama": "Frank",

“kategori”: [{

"manajemen kategori"

}],

"cabang": "Timur"

}, {

“nama”: “Joe”,

“kategori”: [{

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

"nama": "Ralph",

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

"nama": "Gina",

“kategori”: [{

"kategori": "bisnis"

}],

"cabang": "Timur"

}, {

“nama”: “Sam”,

“kategori”: [{

"manajemen kategori"

}, {

"kategori": "rekayasa"

}],

"cabang": "Timur"

}, {

"nama": "Britney",

“kategori”: [{

"kategori": "bisnis"

}],

"cabang": "Barat"

}];

Penjelasan

Kode yang digunakan di atas akan menampilkan nama siswa berdasarkan kategori atau mata pelajaran pendidikan masing-masing beserta geografinya. Fitur pagination Angular JS akan memungkinkan detail ini disebutkan dalam format tabel, di banyak halaman. Ini adalah bagaimana Anda menyortir informasi dan membuatnya lebih rapi untuk pengguna. Ini bisa dibilang cara termudah untuk meningkatkan pengalaman pengguna untuk aplikasi web Anda.

Jadi, jika Anda seorang pengembang web, Anda tidak boleh menunda mempelajarinya seefisien mungkin. Dan dengan argumen di atas yang diberikan di atas tentang mengapa AngularJS adalah alat yang ideal di dunia teknologi saat ini, Anda memiliki semua penjelasan untuk melanjutkan!

Jika Anda tertarik untuk mengetahui lebih banyak tentang AngularJS, Pengembangan tumpukan penuh, lihat Diploma PG Tingkat & IIIT-B dalam Pengembangan Perangkat Lunak Tumpukan Penuh yang dirancang untuk para profesional yang bekerja dan menawarkan 500+ jam pelatihan yang ketat, 9+ proyek, dan tugas, status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.