jQuery: Table Pagination yang ringkas (beserta Callback)

Buat masa ini saya sedang banyak meluangkan masa dengan paparan data menggunakan element TABLE. Secara umumnya saya mempunyai pilihan untuk mengatur langsung muka surat dari server atau diproses langsung di bahagian client. Tetapi pada saya lebih mudah kalau kita manfaatkan pilihan sedia ada; $.ajax. Sampel kali ini hanya akan memaparkan butang sebelum dan selepas sahaja. Tidak seperti kebanyakan pustaka yang ada diluar sana, kebanyakan lebih suka untuk memaparkan butang nombor muka surat.

Server hanya akan berperanan untuk menyediakan data tetapi berparameter. Secara asasnya ia terdiri dari

• halaman semasa
• had muka surat

Anda bebas untuk menggunakan bahasa apa pun cuma anda perlu tetapkan takat (parameter di atas) yang dibuat untuk dapatkan data dari pengkalan data. Kebiasaanya parameter akan ditempatkan di URL dan ini masih juga boleh digunakan dalam ajax. Cuma saya tidak gunakan cara itu pada kali ini. Lihat untaian kod dibawah.

	!function ($) {
	$(function() {
	var mSurat = function(hlmSemasa, perLaman, JumlahRekod, skopDom, callback) {
	var RkdSudahTersiar = hlmSemasa * perLaman,
	lamanTerakhir = Math.ceil(JumlahRekod / perLaman),
	JumRkdSudahTersiar;
	if(RkdSudahTersiar > JumlahRekod)
	JumRkdSudahTersiar = JumlahRekod;
	else
	JumRkdSudahTersiar = RkdSudahTersiar;
	$('h3', skopDom).append('<span class="label label-info blue"> [' + JumRkdSudahTersiar + '/' + JumlahRekod + ']</span>');
	if (JumlahRekod > perLaman) {
	skopDom.prepend('<div class="pull-right paging_container"></div>');
	var bekas = $('.paging_container', skopDom);
	bekas.append('<ul class="pagination pagination-sm"><li><a class="sebelum"><span class="glyphicon glyphicon-chevron-left"></span> Sebelum</a></li><li><a class="seterusnya">Selepas <span class="glyphicon glyphicon-chevron-right"></span></a></li></ul>');
	var pager = $('ul', bekas);
	// Sekiranya kita bukan berada di laman pertama, maka kita upayakan butang sebelum
	if (hlmSemasa != 1) {
	$('.sebelum').parent().removeClass('disabled');
	$('.sebelum').attr('href', '#');
	$('ul', container).on('click', '.sebelum', function(e) {
	// Halang pelayar beralih ke halaman lain
	e.preventDefault();
	// Muat dan paparkan rekod sebelum dan kurangkan 1 pada hlmSemasa
	callback(--hlmSemasa);
	});
	} else {
	$('.sebelum').parent().addClass('disabled');
	}
	//Sekiranya kita di muka surat terakhir, maka kita upayakan butang seterusnya
	if (hlmSemasa != lamanTerakhir) {
	$('.seterusnya').attr('href', '#');
	$('ul', container).on('click', '.seterusnya', function(e) {
	e.preventDefault();
	callback(++hlmSemasa);
	});
	$('.seterusnya').parent().removeClass('disabled');
	} else
	$('.seterusnya').parent().addClass('disabled');
	}
	};
	var dptSenaraiPoskod = function (listType, mukaSurat, had, sisih) {
	var opt = listType + ':' + mukaSurat + ':' + had + ':' + sisih;
	$.ajax({
	type: "POST", // boleh saja tetapkan samada POST atau GET
	url: "/echo/json/", // tetapkan URL server anda disini
	data: opt,
	success: function (data) {
	var e = data;
	$('<table class="table table-striped table-condensed table-bordered list-user">').appendTo(document.body);
	$tbl = $('table', document.body);
	/** Didalam contoh ini saya memanggil satu senarai poskod Malaysia **/
	$tbl.append('<thead><tr>' +
	'<td>Poskod</td>' +
	'<td>Lokasi</td>' +
	'<td>Pejabat Pos</td>' +
	'<td>Kod Negeri</td>' +
	'</tr></thead>');
	$.each(v, function (m, y) {
	$('<tr><td class="text-center">' + y.poskod + '</td>' +
	'<td>' + v.lokasi + '</td>' +
	'<td>' + v.pejabat_pos + '</td>' +
	'<td>' + v.kod_negeri + '</td>' +
	'</tr>').appendTo($tbl);
	});
	mSurat(mukaSurat, 10, e.length, document.body, function (mukaSemasa) {
	dptSenaraiPoskod(listType, mukaSemasa, had, sisih);
	//panggil balik function yang sama
	});
	}
	});
	};
	/** Mula panggil data untuk dipaparkan dalam <table> **/
	dptSenaraiPoskod('53100', 1, 25, 'nama');
	})
	}(window.jQuery)

view raw tablePagination.js hosted with ❤ by GitHub

Perhatikan function pembolehubah mSurat. Ia akan dipanggil selepas sesebuah function telah menyempurnakan tugasan untuk mendapatkan data dari server. Dalam contoh ini ia dipanggil dalam pembolehubah dptSenaraiPoskod. Melalui $.ajax, semua komunikasi adalah berbentuk JSON kerana ianya mudah diatur menggunakan jQuery

Maaf saya tidak dapat sediakan demonya tetapi dipersilakan olah kod yang sedia ada ini untuk sebarang penambahbaikan. Amat dialu-alukan.