Mengatur Ukuran Font dan Gaya Font di DataTables

Rumahit.ID - DataTables adalah plug-in untuk pustaka Javascript jQuery. DataTables merupakan tool yang sangat fleksibel, dibangun di atas dasar peningkatan progresif, yang menambahkan semua fitur canggih ini ke tabel HTML apa pun. plug-in ini banyak digunakan untuk projek pengembangan aplikasi berbasis web baik skala besar maupun sekala kecil.

Saya yakin, hampir 99% programmer menggunakan plug-in ini dalam menampilkan data didalam tabel. Keunggulan datatables yang paling utama adalah kecepatan dan responsifitas dalam menampilkan data termasuk auto-paging. Jadi kita tidak perlu membuat coding khusus untuk pagination (halaman) karena datatables sudah menyediakan fitur bawaan untuk auto-paging nya.

Bagi teman-teman yang ingin mencoba menggunakan DataTables bisa langsung download di website resminya datatables atau bisa menggunakan versi CDN seperti Bootstrap. Di websitenya dijelaskan manual cara penggunaannya. Namun untuk dokumentasi font styling sepertinya belum ada di website datatables.

Secara default, DataTables menggunakan ukuran font 12px . Namun dalam beberapa kasus ukuran font tersebut dinilai terlalu besar atau terlalu kecil. Jadi disini saya akan membahas cara mengubah ukuran font di DataTables.

Caranya sangat mudah, Saya menggunakan inspect element di browser dan menemukan solusinya yaitu menambahkan font-family dan font-size ke .dataTables_wrapper di dataTables.jqueryui.css .

atau jika tidak ingin mengubah CSS bawaan dataTables, cukup tambahkan saja custom CSS sebagai berikut di halaman yang ingin menampilkan DataTables.

.dataTables_wrapper {
    font-family: tahoma;
    font-size: 10px;
    position: relative;
    clear: both;
    *zoom: 1;
    zoom: 1;
}

Ubah font-family dan font-size sesuai keinginan. Selesai, font datatables berubah ukurannya.