Dalam tutorial ini, kita akan membahas cara mengubah format tanggal dalam tabel yang dibuat dengan DataTables. Kita akan menggunakan JavaScript dan jQuery untuk mencapai ini.

Persiapan

Pastikan Anda sudah memiliki DataTables yang siap digunakan. Jika belum, Anda bisa mengunjungi situs resmi DataTables untuk panduan cara memasangnya.

Kode Awal

Berikut adalah kode awal yang kita miliki:

$(document).ready(function(){
  $('#mytable').DataTable({
    responsive: true,
    dom: 'Blfrtip',
    buttons: [
      'excel', 'pdf', 'copy', 'print'
    ],
    lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
    pageLength: 10,
    columnDefs: [
      { 
        targets: [5, 6], // Mengubah indeks kolom menjadi 5 dan 6 (kolom 6 dan 7 dalam basis 0)
        render: function(data) {
          if(data) {
            var dateSplit = data.split('-');
            return dateSplit[2] + '-' + dateSplit[1] + '-' + dateSplit[0];
          }
          return data;
        }
      }
    ]
  });
});

Kode ini seharusnya mengubah format tanggal pada kolom 6 dan 7 dari format ‘yyyy-mm-dd’ menjadi ‘dd-mm-yyyy’. Namun, hanya kolom 7 yang berubah formatnya.

Solusi

Untuk memperbaiki masalah ini, kita perlu mendefinisikan fungsi render untuk setiap kolom secara terpisah. Berikut adalah kode yang telah diperbaiki:

$(document).ready(function(){
  $('#mytable').DataTable({
    responsive: true,
    dom: 'Blfrtip',
    buttons: [
      'excel', 'pdf', 'copy', 'print'
    ],
    lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
    pageLength: 10,
    columnDefs: [
      { 
        targets: [5], // Mengubah indeks kolom menjadi 5 (kolom 6 dalam basis 0)
        render: function(data) {
          if(data) {
            var dateSplit = data.split('-');
            return dateSplit[2] + '-' + dateSplit[1] + '-' + dateSplit[0];
          }
          return data;
        }
      },
      { 
        targets: [6], // Mengubah indeks kolom menjadi 6 (kolom 7 dalam basis 0)
        render: function(data) {
          if(data) {
            var dateSplit = data.split('-');
            return dateSplit[2] + '-' + dateSplit[1] + '-' + dateSplit[0];
          }
          return data;
        }
      }
    ]
  });
});

Dengan cara ini, setiap kolom memiliki fungsi render sendiri dan keduanya diproses secara benar.

Kesimpulan

Dalam tutorial ini, kita telah belajar cara mengubah format tanggal dalam DataTables menggunakan JavaScript dan jQuery. Selamat mencoba!