Membuat Format Ribuan di Datatables

Membuat format numerik yang lebih dari seribu ditampilan dengan koma pemisah di plugin jquery datatables. misalkan ada data dengan nilai 1 juta, nah kita ingin format yang ditampilkan 1.000.000, kita bisa menggunakan fasilitas Format di mysql atau dengan php untuk menampilkan data numerik tadi dengan format ribuan tetapi permasalahnya ketika kita ingin mersorting kolum tersebut maka datatable akan menganggap data tersebut adalah string sehingga sorting tidak berjalan sempurna.

Datatables sebenarnya menyediakan fungsi renderer yang memberikan kita kesempatan untuk memformat data yang akan ditampilkan, dan property bUseRendered yang mempunyai nilai true dan false untuk menentukan kita akan menggunakan data asli atau yang sudah kita format ketika proses renderer terjadi.

bagaimana cara penggunaanya, sebenarnya cukup simple apalagi bagi kita yang sudah mengerti. misalkan kita punya data seperti ini

Id Cabang Qty Omset TargetOmset Pencapaian
33 Surabaya 5147 410159436 323003532 126.98
1159 Kelapa Gading 3406 435909199 388147709 112.30
1160 Ragunan 1058 170366700 171177203 99.52
43 Makassar 615 126314925 128583821 98.23
32 Malang 4281 363296980 382976455 94.86
9 Bandar Lampung 1769 105532496 121286285 87.01
34 Bali 1043 167924254 193128878 86.94
927 Kudus 2424 157989745 185852252 85.00
1126 Matraman 3801 414784724 488472965 84.91
11 Bandung 3949 316472616 379618044 83.36
233 Cikarang 1760 124571990 149773458 83.17
13 Bogor 3186 178331265 218672514 81.55
26 Solo 1815 132326925 169196806 78.20
1163 Jatiasih 441 25970100 36000000 72.13
1145 Daan Mogot 1976 159407848 229417823 69.48
27 Tegal 1327 71992200 104295825 69.02
17 Tangerang 1776 139480098 211156528 66.05
25 Semarang 3744 204518113 323679727 63.18
24 Purwokerto 1661 66676680 110264587 60.46
21 Yogyakarta 2420 96123200 162013302 59.33
7 Palembang 540 56565450 108572783 52.09
15 Cirebon 535 46571975 100804669 46.20
849 Cikampek 381 29871760 121922575 24.50

pada kolum Omset dan TargetOmset kita ingin menggunakan format ribuan, sehingga mudah dibaca oleh mata kita. berikut ini adalah code javascript untuk membuat format berikut dengan fungsi fnRender

$(document).ready(function() {
$(‘#test_aja’).dataTable({
“bJQueryUI”:true,
“aoColumns”: [
null,
null,
null,
{
“fnRender”: function(oObj) {
if(oObj.aData[3] < 1000) {
return oObj.aData[3];
}
else {
var s=(oObj.aData[3]+””), a=s.split(“”), out=””, iLen=a.length;
for(var i =0; i < iLen; i++) {
if(i%3===0 && i!==0) {
out=”,”+out;
}
out=a[iLen-i-1]+out;
}
}
return out;
},
“bUseRendered”: false
},
{
“fnRender”: function(oObj) {
if(oObj.aData[4] < 1000) {
return oObj.aData[4];
}
else {
var s=(oObj.aData[4]+””), a=s.split(“”), out=””, iLen=a.length;
for(var i =0; i < iLen; i++) {
if(i%3===0 && i!==0) {
out=”,”+out;
}
out=a[iLen-i-1]+out;
}
}
return out;
},
“bUseRendered”: false
},
null
]
});
});

dan tampilan table akan menjadi seperti gambar dibawah ini

contoh datatable renderer

contohdatatablerenderer

jadi pada fungsi fnRender kita memformat data kita sehingga ditampilkan dalam format ribuan, dan bUseRendered kita set false, sehingga ketika proses sorting data pada kolum tersebut dia akan mengacu kepada data asli sehingga kolum tersebut akan disorting secara numerik.

oObj.data[3] ini mewakili kolum, hitungan kolum pada datatables dimulai dari 0, jadi variable tadi itu menunjukan kolum ke 4.

disini kita menggunakan aoColumns yang mana property untuk mendifinisikan kolum, null tersebut menyatakan kolum tersebut dalam kondisi default yang mana datatables secara automatis akan mendifinisikan type data dari kolum, anda bisa langsung ke situs datatables untuk detailnya.

jadi pada code di atas kita hanya men-render kolum 4 dan 5 atau 3 dan 4 menurut hitungan datatable.

selamat mencoba.

jangan lupa, anda mesti menambahkan link berikut ini di dalam tag head <script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>    <script type=”text/javascript”> dan link dimana anda menyimpan  file jquery.datatables.js

ucapan terima kasih :

untuk kobein yang telah bersedia direpotkan oleh ku untuk mencari file jquery-1.7.1.min.js online

untuk team datatables yang telah mengembangkan plugin yang sangat membantu.

untuk team pengembang jquery yang telah membuat framework javascript yang sangat memudahkan web developer

 

    • iam markondra
    • November 3rd, 2015

    belibet kwkwkwkwkw
    PISS….

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: