Cara Mudah Menambahkan Nomor Urut pada JQuery Datatables
Rizaldi Maulidia Achmad
Mungkin Anda sudah pernah melihat tutorial saya mengenai Cara Menambahkan Nomor Urut pada JQuery Datatables dengan PHP . Untuk tutorial kali ini, saya telah menemukan cara lebih efektif dari tutorial tersebut. Kelebihan jika Anda menggunakan cara pada tutorial iniadalah tidak dibatas untuk PHP saja, atau untuk Codeigniter saja, atau Yii saja. Ini bisa Anda implementasi disemua framework php. Simak langkah-langkah dan penjelasan cara membuatnya berikut ini.
Dalam tutorial ini, saya asumsikan kita punya sebuah tabel untuk menampilkan data siswa dengan jquery datatables dengan tampilan dan skrip berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jquery Datatable</title>
<!-- Load Datatable & Bootsrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="datatables/lib/css/dataTables.bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered" id="table-siswa">
<thead>
<tr>
<th>NIS</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Telepon</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- Load Jquery & Datatable JS -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="datatables/datatables.min.js"></script>
<script type="text/javascript" src="datatables/lib/js/dataTables.bootstrap.min.js"></script>
<script>
var tabel = null;
$(document).ready(function() {
tabel = $('#table-siswa').DataTable({
"processing": true,
"serverSide": true,
"ordering": true, // Set true agar bisa di sorting
"order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
"ajax":
{
"url": "http://localhost/mynotescode/datatables_php_pdo/view.php", // URL file untuk proses select datanya
"type": "POST"
},
"deferRender": true,
"aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
"columns": [
{ "data": "nis" }, // Tampilkan nis
{ "data": "nama" }, // Tampilkan nama
{ "render": function ( data, type, row ) { // Tampilkan jenis kelamin
var html = ""
if(row.jenis_kelamin == 1){ // Jika jenis kelaminnya 1
html = 'Laki-laki' // Set laki-laki
}else{ // Jika bukan 1
html = 'Perempuan' // Set perempuan
}
return html; // Tampilkan jenis kelaminnya
}
},
{ "data": "telp" }, // Tampilkan telepon
{ "data": "alamat" }, // Tampilkan alamat
{ "render": function ( data, type, row ) { // Tampilkan kolom aksi
var html = "<a href=''>EDIT</a> | "
html += "<a href=''>DELETE</a>"
return html
}
},
],
});
});
</script>
</body>
</html>
Terlihat dari tampilan hasil datatable diatas, belum ada kolom nomor urut. Sekarang kita coba modifikasi skrip diatas agar bisa muncul nomor urutnya. Ikuti langkah-langkahnya berikut ini :
STEP 1 – KOLOM NO
Hal yang harus kita lakukan pertama kali adalah memodifikasi heading dari tabel nya, yakni menambahkan kolom No. Berikut langkah-langkahnya :
- Pada skrip diatas, cari skrip dibawah ini :
<thead> <tr> <th>NIS</th> <th>Nama</th> <th>Jenis Kelamin</th> <th>Telepon</th> <th>Alamat</th> <th>Aksi</th> </tr> </thead> - Ubah kode tersebut dengan menambahkan skrip <th>No</th> seperti berikut ini :
<thead> <tr> <th>No</th> <th>NIS</th> <th>Nama</th> <th>Jenis Kelamin</th> <th>Telepon</th> <th>Alamat</th> <th>Aksi</th> </tr> </thead>
STEP 2 – KONFIGURASI SORTING
Pada tahap ini, kita akan modifikasi konfigurasi parameter order dari datatablenya. karena dalam skrip yang saya gunakan, saya set kolom default untuk sorting nya adalah kolom pertama (index 0). Kenapa harus diubah? karena nanti di step 3, kolom pertama akan kita ganti dengan kolom nomor urut, sehingga kita perlu ubah kolom default sortingnya ke kolom kedua (index 1). ini sebenarnya bebas gimana Anda sendiri mau menentukan kolom default sortingnya yang mana. Berikut ini caranya :
Cari skrip berikut ini :
“order”: [[ 0, ‘asc’ ]],
ubah angka 0 nya jadi angka 1 :
“order”: [[ 1, ‘asc’ ]],
STEP 3 – NOMOR URUT
Langkah ini adalah langkah utama dari menambahkan nomor urut pada jquery datatable. Silahkan tambahkan skrip berikut ini pada skrip datatable di parameter columns.
Cari skrip berikut ini :
tabel = $('#table-siswa').DataTable({
"processing": true,
"serverSide": true,
"ordering": true, // Set true agar bisa di sorting
"order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
"ajax":
{
"url": "http://localhost/mynotescode/datatables_php_pdo/view.php", // URL file untuk proses select datanya
"type": "POST"
},
"deferRender": true,
"aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
"columns": [
{ "data": "nis" }, // Tampilkan nis
{ "data": "nama" }, // Tampilkan nama
Ubah jadi seperti ini :
tabel = $('#table-siswa').DataTable({
"processing": true,
"serverSide": true,
"ordering": true, // Set true agar bisa di sorting
"order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
"ajax":
{
"url": "http://localhost/mynotescode/datatables_php_pdo/view.php", // URL file untuk proses select datanya
"type": "POST"
},
"deferRender": true,
"aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
"columns": [
{
"data": null,
"class": "align-top",
"orderable": false,
"searchable": false,
"render": function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{ "data": "nis" }, // Tampilkan nis
{ "data": "nama" }, // Tampilkan nama
Terlihat perbedaannya skrip diatas jadi ada tambahan antara skrip “columns”: [ dengan { “data”: “nis” },. Yap hanya itu yang perlu ditambahkan untuk menambahkan nomor urut pada jquery datatable. cukup simpel kan 😀
Berikut ini tampilan dan skrip lengkap setelah dimodifikasi :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Implementasi Jquery Datatable dengan PHP</title>
<!-- Load Datatable & Bootsrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="datatables/lib/css/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container">
<div style="background: whitesmoke;padding: 10px;">
<h1 style="margin-top: 0;">Implementasi Jquery Datatable dengan PHP</h1>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="table-siswa">
<thead>
<tr>
<th>No</th>
<th>NIS</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Telepon</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- Load Jquery & Datatable JS -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="datatables/datatables.min.js"></script>
<script type="text/javascript" src="datatables/lib/js/dataTables.bootstrap.min.js"></script>
<script>
var tabel = null;
$(document).ready(function() {
tabel = $('#table-siswa').DataTable({
"processing": true,
"serverSide": true,
"ordering": true, // Set true agar bisa di sorting
"order": [[ 1, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
"ajax": {
"url": "http://localhost/mynotescode/datatables_php_pdo/view.php", // URL file untuk proses select datanya
"type": "POST"
},
"deferRender": true,
"aLengthMenu": [[5, 10, 50], [5, 10, 50]], // Combobox Limit
"columns": [
{
"data": null,
"class": "align-top",
"orderable": false,
"searchable": false,
"render": function(data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{ "data": "nis" }, // Tampilkan nis
{ "data": "nama" }, // Tampilkan nama
{ "render": function(data, type, row) { // Tampilkan jenis kelamin
var html = ""
if (row.jenis_kelamin == 1) { // Jika jenis kelaminnya 1
html = 'Laki-laki' // Set laki-laki
} else { // Jika bukan 1
html = 'Perempuan' // Set perempuan
}
return html; // Tampilkan jenis kelaminnya
}
},
{ "data": "telp" }, // Tampilkan telepon
{ "data": "alamat" }, // Tampilkan alamat
{ "render": function(data, type, row) { // Tampilkan kolom aksi
var html = "<a href=''>EDIT</a> | "
html += "<a href=''>DELETE</a>"
return html
}
},
],
});
});
</script>
</body>
</html>
Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.
Happy Coding ^_^
Cara menambahkan nomor urut pada jQuery DataTables, tutorial lengkap menambahkan nomor urut jQuery DataTables, Tambah kolom Nomor pada Jquery Datatables, Tambah No Urut pada jquery datatables
POST YOUR COMMENTS