Mengubah Format Tanggal di DataTables

1 min read

hajarsabrani

16 April 2024

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;
        }
      }
    ]
  });
});