Penomoran Dinamis Baris Tabel Datatables ClientSide / Data Statis

Latar Belakang

Datatables adalah plugin javascript yang mempermudah menampilkan data dalam bentuk tabel dengan berbagai fitur tambahan seperti sort, search, dan export. Penggunaan datatables terbagi menjadi dua mode yaitu mode clientside dan mode serverside. Mode clientside adalah mode yang paling gampang diterapkan. Clientside adalah mode dimana data bersifat statis hasil echo / pengiriman dari controllers, sedangkan serverside adalah mode dimana data bersifat dinamis, data diambil menggunakan sebuah API.

   Artikel ini membahas penomoran dinamis baris tabel datatables clientside. Penomoran dinamis tidak terdapat pada datatables clientside sehingga fungsinya perlu dibuat mandiri. Perlu diketahui bahwa jumlah data untuk datatables clientside lebih baik tidaklah lebih dari 500 baris data, sebab jika lebih dari itu akan membuat beberapa perangkat tertentu memakan waktu yang lebih lama untuk menampilkan data. 

Pembahasan

Bentuk Dasar

   Datatables clientside memiliki inisiasi dasar seperti dibawah ini :

Dasar HTML

<div class="table-responsive">
     <table class="table" id="datatable">
     ----- isi table ---
     </table>
</div>

Dasar Javascript

<script>
    $(document).ready(function() {
        var table = $("#datatable").DataTable({
            "pageLength": 50,
            --- opsi lain datatables --
        });
    });
</script>

   Kelemahan inisiasi di atas adalah ketika dilakukan sorting maka nomor akan acak, terkadang kita perlu nomor itu dinamis atau tetap pada posisinya sehingga inisiasi tersebut perlu ditambahi.

Kode Tambahan

   Untuk membuat penomoran dinamis ada kode tambahan yang bisa diterapkan contohnya adalah di bawah ini :

<script>
    $(document).ready(function() {
        var table = $("#datatable").DataTable({
            "pageLength": 50,
        });
        ---- kode tambahan ----
        table.on( 'order.dt search.dt', function () {
            table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = (i+1)+".";
            } );
        } ).draw();
    });
</script>

   Kode di atas membuat nomor tetap urut ketika dilakukan sorting syaratnya adalah nomor harus berada pada tag <td> pertama.

Kesimpulan

   Untuk membuat penomoran responsive datatables clientside diperlukan kode tambahan seperti pada pembahasan di atas. Agar berjalan dengan baik jumlah data yang ditampilkan jangan lebih dari 500 baris data. Jika ada masalah lain atau kurang jelas bisa ditanyakan melalui akun media sosial yang ada di widget blog.

Referensi :
1. Stackoverflow Thread