Haloo teman-teman Dumet school, Kembali lagi dengan saya shelli ripati di kursus Web Design Dumet School. Kali ini saya akan melanjutkan pembahasan tentang cara Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part2. Sebelumnya kita sudah membuat struktur html yang isinya adalah select option untuk merubah jumlah data yang akan kita tampilkan, kemudian kita juga sudah membuat function load_ajax() untuk melakukan fungsi ajax javascript dengan 3 parameter yang kita siapkan dan terakhir kita juga sudah membuat function generate_posts() untuk menampilkan data yang akan di cetak dengan melakukan json.parse() lalu menampilkan datanya dengan innerHTML.

Untuk dapat menyelesaikan cara Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part2 kita buat nilai default dari  tiga parameter yang akan digunakan untuk function load_ajax(). Dimana jumlah default dari data yang ditampilkan adalah 5 data dan berikut ini scriptnya ya teman-teman.

Teman-teman bisa perhatikan script di atas ya. Disini saya menyiapkan elemen dengan id post untuk saya tampilkan datanya menggunakan innerHTML, kemudian saya juga siapkan elemen dengan id order-by dimana element ini akan saya ambil valuenya ketika saya melakukan event change dan saya juga membuat variable jml untuk menampilkan jumlah default data. Lalu saya kirimkan datanya kedalam function load_ajax() melalui parameter. Nah jika sudah maka kita tinggal buat event change untuk merubah jumlah data yang akan di tampilkan di html. Berikut scriptnya, teman-teman bisa langsung salin saja.

Nah disini teman-teman bisa pakai data jsonplaceholder seperti pada url di atas. Data ini sangat membantu kita dalam pembuatan program. Jika sudah selesai maka teman-teman bisa simpan. Lalu buka di halaman browsernya masing-masing. Maka tampilan secara defaulnya seperti pada gambar di bawah ini. Dimana data yang tampil pertama kali saat kita buka di browser adalah 5 data.

Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part2

Dan jika saya ubah jumlah datanya dengan select option yang sudah saya siapkan. Maka jumlah data akan tampil seperti yang kita inginkan.

Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part2

Demikian artikel tentang cara Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part2. Buat teman-teman yang penasaran bisa mencobanya langsung. Dan semoga artikel yang saya bahas mengenai ajax javascript ini dapat bermanfaat untuk teman-teman. Selamat mencoba.