Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP

Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP – Hai sobat ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang cara membuat pagination lagi namun kali ini saya akan menggunakan Ajax sehingga aplikasi tidak perlu loading. Cara ini hasilnya agak mirip dengan sobat menggunakan Datatables. Namun jika menggunakan Datatables dan dengan cara yang standar maka itu tidak efektif karena sebenarnya aplikasi mengambil semua data terlebih dahulu baru oleh javascriptnya dibuat pagenya. Jadi jika ada 100rb data ya halaman akan terus loading hingga mendapatkan ke 100rb data tersebut dan dijadikan “SEOLAH-OLAH” pagination jadi user mengira saat berganti page sangat ringan namun jika memuat halamannya lambat tentu tidak efektif. Berbeda dengan cara menggunakan Ajax ini karena datanya kita limit atau tidak kita tampilkan ke 100rbnya namun hanya 10 atau berapa per pagenya jadi loading keseluruhan halaman jadi ringan dan jika ganti page juga cepat dan tentunya tidak perlu loading lagi.

Pagination saya buat ada tombol First/Halaman Pertama dan Last/Halaman Terakhir. Dan kita akan membuat pagination menggunakan bootstrap untuk mempercantik tampilannya seperti yang sudah saya bahas pada tutorial sebelumnya

Simple Pagination Pada Bootstrap 4

Jika sobat mencari artikel untuk membuat pagination dengan cara standar yaitu menggunakan url pada PHP maka sobat bisa kunjungi cara dibawah

Cara Membuat Pagination dengan Database MySQL pada PHP

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

 

2. Buat tabel untuk demonya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

 

3. Kemudian daripada sobat memasukkan datanya satu-persatu maka sobat bisa jalankan perintah query dibawah

 

Cara Membuat Pagination dengan Ajax

Berikut adalah cara membuat simple pagination :

1. Pertama tentunya seperti tutorial saya sebelumnya yaitu saya memisahkan koneksi agar penulisannya hanya sekali dan bisa digunakan berkali-kali dan tentunya mempermudah untuk migrasi server. Pertama yaitu buat file koneksi.php dan isikan kode dibawah untuk mengkoneksikan dengan database

 

2. Buat file index.php. Karena kita membuat pagination dengan tampilan yang telah disediakan oleh bootstrap jadi kita perlu librarti css bootstap dan karena menggunakan Ajax maka kita perlu jquery. Tambahkan kode dibawah pada tag <head>

 

3. Kemudian file index.php, isikan kode dibawah pada tag <body>

Penjelasan :

Kode dibawah berfungsi untuk menampilkan tabelnya menggunakan Ajax

Sedangkan fungsi load_data() adalah untuk mengambil datanya yang ada pada file data.php oleh karena itu kita perlu membuat file data.php yang isinya adalah tabel dan paginationnya.

 

4. Kemudian buat file data.php dan isikan dengan script dibawah

Penjelasan :

Kode diatas sama seperti pada tutorial sebelumnya yang membahas tentang pagination. Kita hanya ‘cut’ kodenya saja dari tabel sampai paginationnya. Namun ada yang kita ganti yaitu pada <a href=””> pada contoh kali ini kita hanya tuliskan <a href=”#”> dan pada <li> kita tambahkan class .halaman dan juga kita tambahkan id=’$page’.

 

5. Jika sobat jalankan maka akan menghasilkan tampilan seperti berikut

Jika sobat kli halamannya maka tidak ada loadingnya atau tanpa refresh page. Tidak percaya? sobat bisa lihat pada demonya. Sekian postingan saya tentangCara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan komentar pada kolom komentar dibawah. Kunjungi postingan saya lainnya untuk menambah ilmu dan wawasan sobat.

 Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

6 thoughts on “Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP

      1. Saya menambahkan javascript yang ada pada halaman index.php pada artikel ini https://dewankomputer.com/2019/02/10/cara-membuat-menu-filter-search-dengan-ajax-tanpa-loading-pada-php/ dengan javascript yang ada di artikel ini https://dewankomputer.com/2019/03/06/cara-membuat-pagination-menggunakan-ajax-tanpa-loading-pada-php/.
        Hasilnya ketika load pertama sesuai dengan artikel Ajax Filter, namun ketika saya ingin mengarah ke halaman berikutnya pada pagination dari hasil pencarian, masilnya malah kembali ke index.php.
        Bagaimana ya caranya?
        saya sudah ubah ini pada javascript, yang mana id data untuk pagination dan class data untuk filter ajax search.

Leave a Reply

Your email address will not be published. Required fields are marked *

thirteen + nine =