Mudahnya Menerapkan Infinite Scrolling di Halaman List dari PHPMaker 2021

Tadi pagi, saya dikejutkan dengan sebuah kiriman di Forum Diskusi PHPMaker, berisi solusi betapa mudahnya menerapkan Infinite Scrolling di halaman List pada Aplikasi Web yang dihasilkan oleh PHPMaker.

Saya yakin Anda sudah paham apa yang dimaksud dengan Infinite Scrolling. Buat yang belum tahu, ini adalah teknik dalam web-design untuk memuat data secara bersambungan saat Pengguna Akhir melakukan scroll ke bagian bawah halaman.

Tujuannya untuk menghilangkan penggunaan pagination saat menampilkan data. Beberapa contoh penggunaan Infinite Scrolling dapat kita rasakan sendiri pada website Twitter atau Facebook.

Buat Anda yang penasaran ingin menerapkan hal ini di halaman List pada Aplikasi Web yang dihasilkan oleh PHPMaker, bisa melihatnya melalui topik ini. Thanks to Adam for sharing this solution for PHPMaker. 😉

Inilah satu bukti nyata lagi, di antara bukti-bukti lainnya, bahwa dengan menggunakan PHPMaker, banyak sekali keuntungan yang kita dapatkan. Khususnya dengan aktif atau rajin mengikuti Forum Diskusi PHPMaker.

Ada begitu banyak tips dan trik, informasi baru (termasuk rilis versi minor baru PHPMaker menjadi 2021.0.4), dan hal-hal lainnya yang kadang-kadang tidak kita duga ternyata bisa diterapkan di Aplikasi Web yang dihasilkan oleh PHPMaker.

Semuanya bisa dilakukan dari dalam project PHPMaker. Apalagi bisa dilakukan dengan sangat mudah dan cepat. Hanya dua langkah saja, untuk menerapkan Infinite Scrolling tadi.

Langkah Pertama, salin kode berikut ke dalam Client Scripts -> Global -> Pages with header/footer -> Global Code pada project PHPMaker Anda:

function infiniteScroll(delay = 1000, previewCheck = true) { // Refresh period ... 1000 = 1 second
	$('form[name="ew-pager-form"]').hide();

	if ($('#autoscroll').length == 0)
		$('<span id="autoscroll" data-page="1"></span>').insertAfter('table.ew-table');

	$.fn.inViewport = function() {
		var win = $(window);
		var viewport = { top: win.scrollTop(), left: win.scrollLeft() };
		viewport.right = viewport.left + win.width();
		viewport.bottom = viewport.top + win.height();
		var bounds = this.offset();
		bounds.right = bounds.left + this.outerWidth();
		bounds.bottom = bounds.top + this.outerHeight();
		return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
	};

	manageScroll(delay, previewCheck);

	function manageScroll(delay, previewCheck) {
		if (!((previewCheck && $('.ew-preview-row-btn.icon-collapse').length > 0) || $('.ew-detail-pages').length > 0 || $('.modal.show').length > 0))
		{
			if ($('#autoscroll').length > 0) {
				if ($('#autoscroll').inViewport()) {
					page = parseInt($('#autoscroll').attr('data-page'));
					pages = parseInt($('input.form-control[name=pageno]').attr('data-pagecount'));
					records = parseInt($('input.form-control[name=pageno]').attr('data-pagesize'));
					if (page <= pages)  // BEFORE: page < pages
					{
						url = location.href + '?';
						url = url.substring(0, url.indexOf('?')) + '?pageno=1&recperpage=' + (page * records);
						$('.ew-preview-row-btn.icon-collapse').trigger('click');
						$('table.ew-table > tbody').load(url + ' table.ew-table > tbody tr', function(response, status, xhr) {
						if (status == 'success') {
							$('#autoscroll').attr('data-page', String(page + 1));  // BEFORE: it is located outside/above this block
							$(this).find('tr:even').removeClass('ew-table-alt-row').addClass('ew-table-row');
							$(this).find('tr:odd').removeClass('ew-table-row').addClass('ew-table-alt-row');
							$('.ew-preview-row-btn').click(ew.showDetails);
							$('div.ew-preview [data-toggle="tab"]').on('show.bs.tab', ew.tabShow);
							$('div.popover').hide();
							ew.initTooltips();
						}
						});
						url = url.substring(0, url.indexOf('?')) + '?pageno=1&recperpage=' + records;
						$.get(url);
					}
				}
			}
		}
		setTimeout(manageScroll, delay, delay, previewCheck);
	}
}

Perhatian: kode di atas terakhir diperbarui pada hari Senin, 9 November 2020 sekitar pukul 07:54 WIB, untuk mengatasi isu data di halaman terakhir tidak ditampilkan jika jumlahnya lebih kecil dari jumlah record per halaman.

Langkah Kedua, salin kode ini ke dalam Client Scripts -> Global -> Pages with header/footer -> Startup Script:

infiniteScroll();

Setelah itu, pastikan Anda sudah men-generate ulang semua file script menggunakan PHPMaker seperti biasa. Kemudian buka halaman List, dan scroll ke bawah untuk merasakan manfaatnya.

Menurut Adam, keterbatasan dari kode ini adalah, jika di halaman List ada panel Preview (untuk menampilkan data Master/Detail) yang sedang dibuka, atau ketika Modal dialog sedang dibuka dari halaman List, maka Infinite Scrolling tersebut akan di-reset kembali dari awal.

O iya, trik ini saya coba dengan menggunakan PHPMaker 2021. Mungkin untuk PHPMaker versi 2020 masih berlaku juga, karena beberapa class element masih sama yang digunakan kedua versi itu.

Ada yang bilang bahwa jika kita memuat konten halaman yang sangat panjang secara terus menerus, maka konten itu akan dimuat ke dalam memory. Jadi, tergantung bagaimana data pada halaman itu dibangun, Infinite Scrolling juga dapat menyebabkan performansi halaman menjadi turun, jika browser harus me-render halaman dalam waktu yang lama.

Oleh karena itu, gunakanlah fitur ini secara bijak, misalnya hanya pada halaman List untuk table tertentu. Anda tinggal memindahkan kode pada bagian Startup Script yang bersifat global di atas tadi, ke dalam Startup Script milik halaman List table tertentu. 😉

Selamat mencoba! 🙂