Cara menampilkan data pada datatables

Sesuai dengan judul diatas untuk cara menampilkan data pada datatables terdapat 3 jenis data source yang bisa digunakan pada Datatables itu sendiri. Tapi sebelum mencoba untuk bagaimana cara menampilkan data pada datatables setidaknya ada sudah paham terlebih dahulu dalam melakukan instalasi & menggunakan datatables secara sederhana seperti pada posting saya sebelumnya dan bisa dilihat disini. Pertama-tama dapat dijelaskan terlebih dahulu Data pada Datatables terdapat 3 konsep inti dalam menghandle data itu sendiri yaitu Processing mode, Data types, Data sources. Dan saat ini yang akan saya bahas adalah tentang data source yang bisa dijelaskan sebagai berikut ini :

3 Cara menampilkan data pada Datatables

1. HTML (DOM) sourced data

Cara pertama ini merupakan cara paling mudah dan bila kamu sudah membaca postingan saya sebelumnya disini, ini sudah mewakili dengan menggunakan HTML (DOM). jadi kamu hanya perlu membuat table biasa dimana didalamnya terdapat table header, table body & table footer bila diperlukan. Dan untuk menandakan table ini menggunakan Datatables dianjurkan untuk menambahkan atribut id dengan nama table tersebut.

<table id="example" class="display" style="width:100%">
<thead>
....
</thead>
<tbody>
....
</tbody>
<tfoot>
....
</tfoot>
</table>

Dan kemudian untuk javascriptnya sendiri kamu hanya perlu menginisialisasi datatables pada id table tersebut.

$(document).ready(function() {
$('#example').DataTable();
} );

2. Ajax sourced data

Untuk cara kedua ini secara tampilan HTML nya cukup sederhana hampir mirip seperti cara pertama hanya saja untuk tag <tbody> tidak perlu ditampilkan. Karena nanti akan otomatis dipanggil oleh ajax.

<table id="example" class="display" style="width:100%">
<thead>
....
</thead>
<tfoot>
....
</tfoot>
</table>

Dan untuk javascriptnya anda perlu menambahkan fitur/option ajax pada Datatables.

$(document).ready(function() {
$('#example').DataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );

Kemudian untuk hasil output dari ajax itu sendiri anda harus dapat menyesuaikan format yang telah ditentukan oleh Datatables.

{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009/01/12",
"$86,000"
]
]}

Lalu bila kita memiliki data dari database tapi formatnya berbeda dan ingin menggunakan fitur ini bagaimana? untuk masalah ini nanti akan saya jelaskan pada postingan yang terpisah. Tapi setidaknya anda sudah paham dulu untuk format ajax yang digunakan oleh Datatables.
Selain itu cara yang digunakan pada ajax diatas bisa dikatakan menggunakan array, karena selain itu juga ada yang menggunakan object, array/object bersarang (nested data) dan Orthogonal data. Dan bila ada waktu akan saya buatkan pula pada postingan berikutnya.

3. Javascript sourced data

Selanjutnya untuk cara ketiga ini untuk HTML nya kita hanya memerlukan tag table saja untuk memanggil data melalui Javascript sourced data ini.

<table id="example" class="display" style="width:100%"></table>

Kemudian untuk Javascript-nya hampir mirip seperti cara kedua hanya saja untuk kolom dapat didefinisikan disini.

$(document).ready(function() {
    $('#example').dataTable( {
        "aaData": [
            /* Reduced data set */
            [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
            [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
            [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
            [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
            [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
            [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
            [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
            [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
            [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
            [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
            [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
            [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
        ],
        "aoColumns": [
            { "sTitle": "Engine" },
            { "sTitle": "Browser" },
            { "sTitle": "Platform" },
            { "sTitle": "Version", "sClass": "center" },
            { "sTitle": "Grade", "sClass": "center" }
        ]
    } );   
} );

aaData merupakan data yang ingin ditampilkan dan aoColumns merupakan kolom yang kita definisikan. Perlu dicatat mungkin sebagian dari kalian merasa kesulitan bila data dari database langsung diintegrasikan dengan datatables untuk 3 cara diatas, untuk postingan selanjutnya saya akan memberikan beberapa sample untuk mengintegrasikan secara langsung dari database. Salam bebas ngoding

Bebas Ngoding