— 18 April 2024 in JS & JQUERY

Display datatables with json and groups based on certain columns

dt-json

Postingan kali ini akan membahas mengenai datatables, atau cara lain menampilkan datatables yaitu dengan json. Sebelumnya ada di artikel ini dengan judul Menampilkan Database Server Side dengan jQuery Datatables

Selain itu kali ini akan dibahas mengenai bagaimana cara menampilkan group di datatables. Berikut contoh tampilan hasilnya.

Jadi bisa di lihat diatas bahwa baris “My Company” awalnya merupakan kolom pada datatables. Dibawah merupakan kode lengkap untuk menampilkan grouping, dan juga ada custom filter dan penomoran otomatis.

var division = $('#DT_division').DataTable({
	"autoWidth": false,
	"lengthChange": true,
	"searching": true,
	"ordering": true,
	"info": true,
	"responsive": true,
	"lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
	"pagingType": "full_numbers",
	"language": {
		"oPaginate": {
			'sNext': '<i class="fa fa-angle-right"></i>',
			'sPrevious': '<i class="fa fa-angle-left"></i>',
			'sFirst': '<i class="fa fa-angle-double-left"></i>',
			'sLast': '<i class="fa fa-angle-double-right"></i>'
		}
	},
	"ajax": {
		url: URL + "setting/master/division/division_data",
		dataSrc: 'data'
	},
	"initComplete": function () {
		this.api().columns([3]).every(function () {
			var column = this;
			var select = $('<select class="form-control select2" style="width: 100%;"><option value="">** All</option></select>')
				.appendTo($("#divisionId").empty())
				.select2()
				.on('change', function () {
					var val = $.fn.dataTable.util.escapeRegex(
						$(this).val()
					);
					column
						.search(val ? '^' + val + '$' : '', true, false)
						.draw();
				});
			column.data().unique().sort().each(function (d, j) {
				select.append('<option value="' + d + '">' + d + '</option>');
			});
		});
	},
	"columns": [
		{ data: 'id', className: "text-center", orderable: false },
		{ data: 'companyId' },
		{ data: 'divisionCode' },
		{ data: 'divisionName' },
		{ data: 'status' },
		{ 
			data: 'action', 
			title: '<i class="fa fa-ellipsis-h"></i>',
			className: "text-center", 
			orderable: false, 
		},
	],
	"rowGroup": {
		startRender: function (rows, group, level) {
			if (level === 0) {
				return group;
			}
			else if (level === 1) {
				return group +' ('+rows.count()+' rows)';
			}
		},
		dataSrc: ["companyId"]
	},
	"columnDefs": [
		{
			"visible": false, 
			"targets": [1] 
		}
	],
});

division.on( 'draw.dt', function () {
	var PageInfo = $('#DT_division').DataTable().page.info();
	division.column(0, { page: 'current' }).nodes().each( function (cell, i) {
		cell.innerHTML = i + 1 + PageInfo.start;
	});
	$("#totalData").html(PageInfo.recordsDisplay+' Records');
});

Jangan lupa pada table berikan ID id=”DT_division” supaya table bisa dikenali oleh kode baris diatas.

Pada baris ini untuk menampilkan custom filter (select2), sumber datanya berasal dari kolom “divisionName” dengan tampilan berikut:

"initComplete": function () {
		this.api().columns([3]).every(function () {
			var column = this;
			var select = $('<select class="form-control select2" style="width: 100%;"><option value="">** All</option></select>')
				.appendTo($("#divisionId").empty())
				.select2()
				.on('change', function () {
					var val = $.fn.dataTable.util.escapeRegex(
						$(this).val()
					);
					column
						.search(val ? '^' + val + '$' : '', true, false)
						.draw();
				});
			column.data().unique().sort().each(function (d, j) {
				select.append('<option value="' + d + '">' + d + '</option>');
			});
		});
	},

Pada baris ini untuk menampilkan Jumlah Entries dan auto number ketika pencarian data dilakukan.

division.on( 'draw.dt', function () {
	var PageInfo = $('#DT_division').DataTable().page.info();
	division.column(0, { page: 'current' }).nodes().each( function (cell, i) {
		cell.innerHTML = i + 1 + PageInfo.start;
	});
	$("#totalData").html(PageInfo.recordsDisplay+' Records');
});

Terakhir, untuk menampilkan grouping terdapat pada baris kode berikut:

"rowGroup": {
		startRender: function (rows, group, level) {
			if (level === 0) {
				return group;
			}
			else if (level === 1) {
				return group +' ('+rows.count()+' rows)';
			}
		},
		dataSrc: ["companyId"]
	},
	"columnDefs": [
		{
			"visible": false, 
			"targets": [1] 
		}
	],

Dijelaskan diatas bahwa group tersebut bisa terdiri dari 2 level grouping yaitu level 0 dan level 1, pada scrip diatas hanya dilakukan 1 level saja yaitu grouping berdasarkan companyId kemudian di hide dari kolom.

Data json hanya contoh, silakan custom sendiri pada query yang digunakan.

header("Content-Type: application/json; charset=UTF-8");

$result = $db->query("QUERY Anda disini");
$data = [];

$i = 0;
foreach ($result as $row)
{
	$data[] = [
		"id"			=> $i+1,
		"divisionId"	=> $row->divisionId,
		"companyId"		=> $row->companyName,
		"divisionCode"	=> $row->divisionCode,
		"divisionName"	=> $row->divisionName,
		"status"		=> $row->status',
		"action"		=> ''
	];
	$i++;
}
$response = [
	"draw"            	=> 0,
	"recordsTotal"    	=> intval(count($result)),
	"recordsFiltered" 	=> intval(count($result)),
	"data"            	=> $data,
	"success"			=> true,
	"timestamp"			=> time()
];
echo json_encode($response);

Kurang lebih hasil akhir akan seperti berikut

Author Profile

Ricki K
Hi my name is Ricki, I am a blogger from Indonesia. Founder of erkamoo.com, Besides creating Web Applications, I also write about Blogging Tips and Tutorials on Programming, Databases, HTML.