Menampilkan Nomor Baris di Datatables

Setelah sebelumnya saya menulis tutorial Menggunakan Datatables di Laravel 5.1 LTS, kali ini adalah cara untuk menambahkan nomer baris di tabel Datatables.

Lihat orang.blade.php di tutorial tersebut terutama dibagian

<script type="text/javascript">
$(document).ready(function() {
		$('#orang').DataTable({
			processing: true,
			serverSide: true,
			ajax: '{{ url("orang/data") }}'
		});
	});
</script>

ubah menjadi

<script type="text/javascript">
$(document).ready(function() {
		$('#orang').DataTable({
			processing: true,
			serverSide: true,
			ajax: '{{ url("orang/data") }}',
			"fnCreatedRow": function (row, data, index) {
			$('td', row).eq(0).html(index + 1);
			}
		});
	});
</script>

dan bagian

<table id="orang" class="table table-bordered table-hover">
	<thead>
	<tr>
		<th>id</th>
		<th>Name</th>
		<th>Country</th>
	</tr>
	</thead>
</table>

menjadi

<table id="orang" class="table table-bordered table-hover">
	<thead>
	<tr>
		<th>#</th>
		<th>Name</th>
		<th>Country</th>
	</tr>
	</thead>
</table>

Hasil yang ditampilkan sama saja, karena sebelumnya data yang kita miliki memiliki id yang berurutan. Yang perlu di ingat untuk menampilkan nomor urut di datatables adalah di tabel harus ditambahkan satu kolom untuk tempat no urut, jumlah data yang diambil dari ajax: '{{ url("orang/data") }}' jumlah kolom sama dengan database.

Contoh anda hanya ingin menampilkan data Name maka di OrangController.php akan berisi

$users = Orang::select(['Name']);

dan tabelnya

<table id="orang" class="table table-bordered table-hover">
	<thead>
	<tr>
		<th>#</th>
		<th>Name</th>
	</tr>
	</thead>
</table>

cara ini akan gagal

karena jumlah kolom di ajax: '{{ url("orang/data") }}' solusinya dengan mengubah controller menjadi

$users = Orang::select(['id', 'Name']);

atau

$users = Orang::select(['country', 'Name']);

penamaan kolom pertama tidak berpengaruh, karena isi kolom tersebut akan ditimpa oleh nomor urut.

Last Updated on 27 August 2015