Perkenalkan Semua, gambar di atas adalah screenshot dari aplikasi yang sedang saya kembangkan, nama panggilannya SIRINE. Nama panjangnya Sistem Informasi Pemeriksaan Eksternal. Digunakan untuk melakukan pemantauan tindak lanjut atas hasil pemeriksaan auditor eksternal seperti BPK atau BPKP. Karena pemeriksaan oleh auditor eksternal mencakup seluruh unit di Kementerian Keuangan, maka aplikasi ini pun dilengkapi tabel referensi berisi data seluruh satker yang ada di lingkungan Kementerian Keuangan, seperti yang saya cuplik gambarnya di atas.
Setidaknya ada 1905 satker di Kementerian Keuangan yang tercatat dalam database. Apa yang terjadi seandainya kita ingin menampilkan keseluruhan satker tersebut dalam bentuk sebuah tabel di satu laman web? Sudah pasti, tabel tersebut akan panjang Naudzubillah. Paling tidak, tampilan yang semacam ini akan mempersulit kita move on dari bayangan mantan proses pencarian data oleh pengguna.
Memberi solusi atas hal semacam ini, banyak sekali plugin Javascript bertebaran di luar sana yang dapat kita manfaatkan. Dengan satu klik saja, Simbah Google akan memberi kita banyak alternatif plugin javascript untuk mengolah informasi berupa tabel pada sebuah laman web. Salah satu yang cukup sering saya gunakan, adalah DataTables. DataTables sendiri merupakan plugin dari jQuery, salah satu Javascript Library yang jamak digunakan dalam pemrograman web. Situs resmi DataTables dapat dikunjungi di alamat https://datatables.net.
Fitur dasar yang disediakan oleh DataTables antara lain:
- Paging, menampilkan data di tabel dalam beberapa halaman
- Sort, mengurutkan data di kolom tertentu
- Search, mencari record yang mengandung kata kunci tertentu
Instalasi
Sebelum melakukan instalasi, ada beberapa hal yang perlu diperhatikan agar kita dapat memasang DataTables dalam aplikasi kita. Yang pertama adalah dependensi. Prinsipnya, karena DataTables merupakan plugin dari jQuery, maka kita harus memastikan jQuery telah terpasang dan termuat di aplikasi web kita, sebelum script DataTables.
Hal berikutnya adalah format HTML untuk tabel yang akan dijadikan objek DataTables. Meskipun format HTML biasa tidak mensyaratkan adanya tag ini, namun untuk dapat dieksekusi, kode HTML untuk tabel yang akan kita pasang DataTables harus memiliki tag <thead></thead> di baris tabel yang menjadi header, serta tag <tbody></tbody> pada baris yang menjadi body. Kurang lebih format HTML untuk tabel tersebut adalah seperti ini:
Untuk melakukan instalasi, karena DataTables merupakan sebuah plugin, maka kita harus menyertakan (include) file CSS (cascading stylesheet) dan Javascript DataTables. Hal ini dapat dilakukan menggunakan CDN (Content Delivery Network), maupun melakukan instalasi lokal.
Menggunakan CDN, artinya kita memuat file CSS dan Javascript untuk DataTables dari repositori daring (online) DataTables. Kelebihan jika kita menggunakan CDN adalah proses pemuatan laman bisa jadi lebih ringan karena browser telah menyimpan cache file CSS dan JS yang pernah kita akses. Instalasi juga jauh lebih mudah sebab kita tidak perlu melakukan kustomisasi atas jalur virtual (virtual path) file-file pendukung plugin DataTables. Namun jika kita ingin melakukan instalasi secara lokal, maka seperti biasa kita harus mengunduh satu paket file pendukung instalasi DataTables untuk kita taruh di folder aplikasi kita.
a. Menyertakan file JS dan CSS
Untuk lebih mudahnya, dalam proyek kali ini kita akan melihat bagaimana instalasi DataTables dilakukan melalui CDN. Situs resmi DataTables sudah menginformasikan URL file-file pendukung instalasi DataTables di CDN yang mereka kelola. Maka langkah pertama untuk melakukan instalasi adalah menyertakan file JS dan CSS tersebut di laman web kita. Namun perlu ditekankan kembali, tag script untuk javascript DataTables harus berada setelah tag script untuk jQuery, sebagaimana digambarkan di bawah:
b. Inisialisasi DataTables
Inisialisasi DataTables, dilakukan dengan cara yang sangat sederhana. Kita hanya perlu menambahkan baris javascript untuk memanggil fungsi DataTables kepada tabel tertentu. Artinya, kita harus mendefinisikan tabel dengan atribut ‘id’ apa, yang akan kita terapkan DataTables. Dalam ilustrasi di bawah, kita akan menerapkan DataTables pada tabel yang atribut ‘id’-nya ‘Contoh_DataTables’.
Pastikan juga, tabel yang akan kita terapkan DataTables, telah memiliki atribut ‘id’ yang nilainya ‘Contoh_DataTables’.
Jika kondisi tersebut telah terpenuhi, maka kita akan mendapati tampilan tabel satker dengan fitur standar DataTables.
Tabel dengan DataTables akan dibagi ke dalam sekian jumlah halaman (page). Melalui DataTables pengguna dapat memilih untuk menampilkan sejumlah data tertentu di setiap halaman sesuai kebutuhan.
Pengguna juga dapat melakukan pencarian data dengan sangat mudah melalui kotak pencarian yang disediakan oleh DataTables. DataTables akan segera melakukan filter untuk menampilkan record yang memuat kata kunci yang diberikan oleh pengguna.
Extended Features
a. Styling
Di situs resmi DataTables, kita akan mendapatkan banyak sekali pilihan tema untuk Styling tamilan DataTables. Namun, saya merekomendasikan untuk menggunakan fasilitas ThemeCreator (https://datatables.net/manual/styling/theme-creator) yang dikembangkan oleh DataTables, dalam hal personalisasi tampilan DataTables kita.
ThemeCreator memungkinkan kita melakukan pemilihan warna, ukuran, dan tipe bingkai (border) maupun latar belakang. ThemeCreator nantinya akan melakukan generate file SCSS untuk kita gunakan di aplikasi web kita.
b. Responsive
Bagaimana jika tabel yang akan kita olah memiliki kolom yang banyak? Sama halnya dengan tabel yang memanjang ke bawah, tabel yang memanjang ke samping tidak memberikan user experience yang lebih baik daripada tabel yang tampil secara pas di layar pengguna.
DataTables memberikan fasilitas kepada pengguna untuk menyajikan tabel secara responsif. Apa artinya? Artinya apabila tabel tersebut secara horizontal lebih panjang daripada ruang yang disediakan, maka kolom-kolom yang overflow akan secara otomatis disembunyikan dan dapat ditampilkan secara breakdown apabila pegguna memerlukan.
Untuk menambahkan fitur ini kita hanya perlu menambahkan satu parameter bertipe boolean, yaitu responsive dan kita atur nilainya menjadi true.
Karena tabel yang kita jadikan contoh proyek tidak memiliki kolom yang terlalu banyak, maka kita tidak perlu mempraktikkan fitur ini. Namun kira-kira seperti inilah tampilannya apabila kita memberikan fitur responsive pada tabel yang secara horizontal terlalu panjang.
c. Internationalisation
Secara default, fitur-fitur DataTables disajikan dalam Bahasa Inggris. Istilah-istilah seperti Previous, Next, Show Entries, Search dapat juga disajikan dalam Bahasa selain inggris. Ada lebih dari 50 internationalisation plugin dalam format JSON yang tersedia di situs DataTables.
Sekalipun begitu, kita juga dapat mendefinisikan sendiri istilah untuk fitur-fitur DataTables, melalui parameter tambahan yang disebut language. Language sendiri adalah parameter dengan format object. Dalam gambar di bawah ini saya contohkan penggunaan parameter language untuk menyajikan fitur-fitur DataTables dalam istilah Bahasa Indonesia. Saya menambahkan parameter language di dalam fungsi Javascript yang kita gunakan untuk menginisialisasi DataTables.
Hasilnya, adalah DataTables dengan fitur berbahasa Indonesia.
d. And many moooooooreeee!!!!!!!
Feel free to explore! 🙂
