Datatable : Custom Layout Appearance

Photo by Markus Winkler on Unsplash

Datatabel merupakan plugin yang sangat memudahkan developer dalam menampilkan sebuah data, dimana dengan datatabel kita tidak perlu susah-susah membuat fitur pencarian, indexing halaman, pagging halaman bahkan sampai export ke csv atau excel.

Plugin tools yang ada dalam datatable sendiri diantaranya :

B = Button untuk export excel,pdf,cvs dan lainnya
f = filter, berupa input search
tr = tabel datatabel
l = filter untuk menampilkan berapa data per-tabel
i = informasi banyak data
p = tombol paginasi halaman 1 sampai n

Namun, kadang saya juga binggung untuk mengatur posisi dari tools dari data tabel tersebut. Misalkan ingin mengubah posisi search dibagian kiri atas maupun tools lain. Didalam dokumentasinya sendiri sudah menyertakan pemanggilan tools ini,namun kadang sangat susah mengatur posisi presisi dari tools ini.

let table = $('.table-user').DataTable({
       dom: "<'row mb-3'<'col-sm-12 col-md-4'B><'col-sm-12 col-md-8'f>>" +
             "<'row'<'col-sm-12'tr>>" +
             "<'row mt-4'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'i><'col-sm-12 col-md-4'p>>",
       processing: true,
....

Sebagai contoh

“<’row mb-3'<’col-sm-12 col-md-4'B><’col-sm-12 col-md-8'f>>”

Kode diatas akan menghasikan code yang akan membentuk code sebagai berikut :

<div class="row mb-3">

  <div class="col-sm-12 col-md-4">
    <div class="dt-buttons">
      isi dari button
    </div>
  </div>

  <div class="col-sm-12 col-md-8">
    <div class="dt-buttons">
      Input search
    </div>
  </div>

</div>

Hasil akhir dari kode diatas adalah :

Tampilan pada datatable

Kiri atas = button
Kanan atas = search
Tengah = tabel
Kiri bawah = show n entry
Tengah bawah = informasi jumlah data
Kanan bawah = paginasi