Membuat tampilan tabel dengan menggunakan dataTables serverside membutuhkan ketelitian dan kecermatan. Karena proses untuk membuat query select dan menampilkan pada modul lebih sulit dari dataTables maupun script native.
Sebagai contoh salah satu untuk mengatur tampilan kolom rata kanan/kiri/center saja tidak bisa di tempatkan pada html td atau th pada tabel.
Contoh kasus saya membuat tampilan data aset menggunakan dataTables Serverside.
<script>
$(document).ready(function() {
var as = $('#a1').val();
var ad= $('#a2').val();
var ak= $('#a3').val();
$('#example1').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "load-data.php?d="+as+"&a="+ad+"&b="+ak,
"columnDefs": [
{ className: "UniqRupiah", "targets": [ 12 ] //Menyisipkan class untuk text-align pada array 12
},
{
"searchable" : false,
"orderable" : false,
"targets" : 14,
"render" : function(data,type,row){
var btn="<center> <a href=\"javascript:LoadEditData('"+btoa(row["14"])+"')\"
class=\"btn btn-sm btn-info\"><i class=\"fa fa-edit\"></i></a> <br> <br>
<a href=\"javascript:LoadDeleteData('"+btoa(row["14"])+"')\" class=\"btn btn-sm btn-danger\">
<i class=\"fa fa-trash\"></i> </a> ";
return btn;
}
}
]
} );
} );
</script>
Dengan menyisipkan kode :
{ className: "UniqRupiah", "targets": [ 12 ] },
kemudian kita menambahkan css sebagai berikut :
<style>
.UniqRupiah {
text-align: right;
}
</style>
Alhamdulillah tampilan text-align bisa di sesuaikan.
Tidak ada komentar:
Posting Komentar