Untuk aplikasi CRUD yang kita buat telah sampai pada proses yang terakhir ya, dimana proses ini adalah cara membuat load more dengan Ajax Jquery bertujuan untuk membuat sebuah load more, apa itu load more, load more yang saya maksud di sini adalah ketika kita mengklik tombol load more nya akan muncul data yang berikutnya, tentunya data itu berasal dari sebuah database yang kita punya, oke bagaimana cara membutnya simak terus ya.

sudah paham ya maksud dari artikel saya kali ini, apakah sudah kebayang hehe tentang cara membuat load more dengan Ajax Jquery, kenapa saya buat seperti ini suapaya data kita enak dilihat jadi tidak langsung semua data di tampilkan misal ada 20 data, lebih cantik jika kita menggunakan load more seperti itu. tapi untuk data beratus-ratusan saya lebih suka menggunakan pagination ya, hehe. oke langkah pertama panggil event click load morenya, disini saya memberikan class load more dengan nama more seperti ini:

cara membuat load more dengan Ajax Jquery

seperti ini, untuk nama seterah teman-teman ya, teman-teman juga bisa memanggil langsung button nya tidak masalah asal tidak bentrok, oke selanjutnya kita buat eventnya seperti ini, oiya ini ada di dalam index.php ya

cara membuat load more dengan Ajax Jquery

Bisa dilihat, jika melihat kodingan di atas teman-teman tidak bingung ya, saya menggunakan event click, di mana event itu menuju pada fungsi app.load_more dan dalam fungsi load_more saya ketikan seperti ini:

cara membuat load more dengan Ajax Jquery

  1. dataMurid + 2 itu maksudnya kerena disini saya menggunakan dataMurid awal dengan value 2, maka ketika saya klik tambah 2 jadi 4, klik lagi 4 + 2 jadi 6 dan seterusnya seperti itu.
  2. dan var tot = tot itulah total dimana total yang di maksud disini adalah total dari jumlah datanya, bertujuan untuk apa saya sampai menghitung jumlah seluruhnya, karena disini saya ingin membuat ketika data sudah abis maka tombol load more akan berubah, jadi supaya ada perbedaan saya buat perbedaan saat data memang sudah tidak ada.
  3. bisa dilihat di no 3 ini saya memberikan class danger dan text-light ini semua dari bootstrap ya
  4. dan ini lah jika data belum melibihi batas total data akan menampilkan terus.

oke selanjutnya silahkan teman-teman ke webservicenya dan dan silahkan ketikan seperti ini:

cara membuat load more dengan Ajax Jquery

jika sudah kita coba prosesnya

cara membuat load more dengan Ajax Jquery

cara membuat load more dengan Ajax Jquery

dan ini adalah ketika data sudah tidak ada lagi maka button pun berubah

cara membuat load more dengan Ajax Jquery

bagaimana apakah sudah ada yang berhasil, disini saya berhasil ya, dan saya rasa sudah cukup jelas belajar kita tentang cara membuat load more dengan Ajax Jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.