Jquery datatables : dynamic data, custom column, add link icon, open in facebox from id – part 3

**** Part  -3 : Add custom column ****

Tahapan berikutnya adalah menampilkan kolom kosong. Kolom kosong disini dimaksudkan untuk meletakkan link berupa icon atau tulisan seperti untuk operasi CRUD ataupun link ke eksternal file. Rencananya kolom kosong ini diletakkan di kolom paling kanan setelah kolom email. Dari beberapa referensi di website perubahan ada yang melakukannya di file email_data.php ataupun di file email_datatable.php (mengenai dua file ini silahkan buka part-1 dan part-2). Namun apa yang saya lakukan disini adalah cara yang saya cobakan 100% bisa dan mudah.

1. OK sekarang kita memakai logikanya dulu. kalau kita ingin menambahkan 1 kolom kosong di sebelah kanan, maka yang pertama kali kita sesuaikan adalah jumlah kolom di file email_datatable.php. Silahkan cari baris berikut :

<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display” id=”example”>
<thead>
<tr>
<th width=”20%”>id</th>
<th width=”20%”>Jenis</th>
<th width=”30%”>Nama</th>
<th width=”30%”>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=”4″ class=”dataTables_empty”>Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>Jenis</th>
<th>Nama</th>
<th>Email</th>
</tr>
</tfoot>
</table>

 

menjadi ………….

<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display” id=”example”>
<thead>
<tr>
<th width=”20%”>id</th>
<th width=”20%”>Jenis</th>
<th width=”30%”>Nama</th>
<th width=”30%”>E-mail</th>
<th width=”30%”>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=”4″ class=”dataTables_empty”>Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>Jenis</th>
<th>Nama</th>
<th>Email</th>
<th>Aksi</th>
</tr>
</tfoot>
</table>

Tulisan yang berwarna hijau akan menambahkan satu kolom setelah kolom email.

2. Setelah kolom ditambahkan, kita memerintahkan jquery.datatables untuk mengenali kolom yang kita tambahkan. Silahkan cari baris berikut masih di file email_datatable.php

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“bJQueryUI”: true,
“sAjaxSource”: “email_data.php”,
“sPaginationType”: “full_numbers”,
 “aoColumns”: [
            null,
            null,
            null,
            null,
           {    “mData”: null,
                “sClass”: “center”,
            }]
} );
} );
</script>

Tulisan berwarna hijau adalah script yang ditambahkan. Perintah ini adalah mendefinisikan masing-masing kolom dalam datatable. Kolom 1 s/d kolom 4 tidak ada pendefinisian khusus/seperti apaadanya sehingga diberi nilai null, sedangkan kolom 5 didefinisikan tidak ada data/kosong. Sehingga apabila berhasil, maka tampilannya akan seperti berikut ini (klik untuk memperbesar gambar).

19-04-2014 23-16-31

Bila sudah berhasil silahkan lanjut ke Part-4 tentang penambahan icon dan link di kolom yang kosong tadi.

Iklan