Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part1

Hallo teman-teman Dumet School, Kali ini saya akan membahas tentang cara Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part1. Dimana jumlah data yang kita tampilkan bisa berubah-ubah sesuai dengan yang kita inginkan. Untuk data yang akan saya tampilkan disini adalah data dari jsonplaceholder.

Oke teman-teman, untuk membuat cara Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part1, kita buat terlebih dahulu struktur htmlnya seperti pada script di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX Native.</title>
	<style>
		body {
			margin: 5%;
			font-family: sans-serif;
		}
		
		table {border-collapse: collapse; width: 100%}
		td, th {border: 1px solid #eee; padding: 3px}
	</style>
</head>
<body>
	
<h3>Latihan 4.</h3>
<p>Tampilkan data sebanyak 
	<select id="order-by">
		<option value="">- pilih -</option>
		<option value="5">5</option>
		<option value="10">10</option>
		<option value="15">15</option>
		<option value="20">20</option>
		<option value="25">25</option>
	</select>
</p>
<table>
	<thead>
		<tr>
			<th>#</th>
			<th>Title</th>
		</tr>
	</thead>
	<tbody id="posts">
	</tbody>
</table>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AJAX Native.</title>

<style>

body {

margin: 5%;

font-family: sans-serif;

}

table {border-collapse: collapse; width: 100%}

td, th {border: 1px solid #eee; padding: 3px}

</style>

</head>

<body>

<h3>Latihan 4.</h3>

<p>Tampilkan data sebanyak

<option value="">- pilih -</option>

</select>

</p>

<table>

<thead>

<tr>

<th>Title</th>

</tr>

</thead>

</tbody>

</table>

</body>

</html>

Nah disini teman-teman bisa lihat struktur htmlnya. Dimana saya membuat select option untuk membuat jumlah data itu dinamis. Jika sudah maka kita akan lanjut membuat script ajax javascriptnya. Pertama saya buat function untuk meload ajaxnya terlebih dahulu.

function load_ajax(url, row, callback) 
{
	const ajax = new XMLHttpRequest()
	ajax.open('GET', url, true)

	ajax.onreadystatechange = function() {
		if(this.readyState === 4 && this.status === 200) {
			callback(this.responseText, row)
		}
	}
	ajax.send()
}

function load_ajax(url, row, callback)

{

const ajax = new XMLHttpRequest()

ajax.open('GET', url, true)

ajax.onreadystatechange = function() {

if(this.readyState === 4 && this.status === 200) {

callback(this.responseText, row)

}

ajax.send()

}

Teman-teman bisa perhatikan script di atas, dimana ada 3 parameter yang saya buat di dalam function load_ajax(). 3 parameter ini merupakan url, jumlah data atau callback , kemudian saya lanjutkan untuk membuat sebuah function untuk menampilkan data dengan melakukan json.parse() dimana ada 3 parameter yang saya siapkan untuk data, row atau jumlah data dan elemen untuk tempat saya menampilkan data tersebut. seperti pada script di bawah ini.

function generate_posts(data, row, _elemen)
{
	let posts = JSON.parse(data)
	let count = parseInt(row)

	_elemen.innerHTML = ""

	for(var i = 0; i < count; i++) {
		_elemen.innerHTML += `<tr>
			<td>${i+1}</td>
			<td>${posts[i].title}</td>
		</tr>`
	}
}

function generate_posts(data, row, _elemen)

{

let posts = JSON.parse(data)

let count = parseInt(row)

_elemen.innerHTML = ""

for(var i = 0; i < count; i++) {

_elemen.innerHTML += `<tr>

<td>${posts[i].title}</td>

</tr>`

}

Sampai disini dulu pembahasan tentang cara Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part1. Saya akan lanjutkan pembahasannya untuk membuat jumlah default data yang tampil dan event change untuk mengubah jumlah data di part2.

Menampilkan Jumlah Data Dinamis Menggunakan Ajax Javascript Part1

Facebook DUMET School

Categories