Default page

Viewing : list.php

<!-- Content Header (Page header) -->
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0"><?=$title?></h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item active"><?=$li_1?></li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <div class="card-tools">
              </div>
              <div class="row">
                <input class="col-2" id="start_date">&nbsp;&nbsp;&nbsp;
                <input class="col-2" id="end_date">&nbsp;&nbsp;&nbsp;
                <a class="btn btn-sm btn-success" id="search_button">Search</a>
              </div>
            </div>
            <div class="card-body">
              <table id="transaksiTable" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Tgl</th>
                    <th>Keterangan</th>
                    <th>Debit</th>
                    <th>Kredit</th>
                    <th>Saldo</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                      <th></th>
                      <th></th>
                      <th></th>
                      <th style="font-weight: bold">Saldo Akhir</th>
                      <th class="text-right" style="font-weight: bold" id="saldoAkhir">0</th>
                      <th></th>
                  </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
        </div>
    </div>
  </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
<div class="modal fade" id="edit">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form class="form-horizontal" method="post" id="form-edit">
        <div class="modal-header">
          <h4 class="modal-title" id="form-title"></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="text" name="data_id" class="d-none" id="data_id">
          <?=csrf_field()?>
          <?php 
            echo form_text('nama');
            echo form_text('tgl');
            echo form_text('jumlah');
          ?>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<div class="modal fade" id="detail">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="form-title">Detail Transaksi Siswa</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <table id="transaksiTable" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Tgl</th>
                    <th>Nama</th>
                    <th>Jumlah</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody id="detail-transaksi"></tbody>
          </table>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<script type="text/javascript">
  
  let transaksiTable; // Variabel global untuk instance DataTables
  let csrfName = $('input[name="Buyas_APPS"]').attr('name'); // Nama token
  let csrfTokenHash = $('input[name="Buyas_APPS"]').val(); // Nilai token
  let finalSaldoAkhir = 0; // Variabel untuk menyimpan saldo akhir
  // Fungsi untuk memuat data via AJAX
  function loadData(startDate, endDate) {
      $.ajax({
          url: "<?= base_url('keuangan/loadData') ?>",
          method: "POST",
          data: { 
              start_date: startDate,
              end_date: endDate,
              [csrfName] : csrfTokenHash
          },
          dataType: "json",
          beforeSend: function() {
              // Tampilkan loading spinner jika perlu
          },
          success: function(response) {
              csrfTokenHash = response.csrf_token_hash;
              // Hancurkan instance DataTables yang lama jika ada
              if ($.fn.DataTable.isDataTable('#transaksiTable')) {
                  transaksiTable.destroy();
              }
              finalSaldoAkhir = response.saldo_akhir;

              // Inisialisasi ulang DataTables dengan data baru
              transaksiTable = $('#transaksiTable').DataTable({
                  responsive : true, 
                  buttons: [
                      {
                          extend: 'excel',
                          footer: true,
                          exportOptions: {
                              format: {
                                  body: function (data, row, column, node) {
                                      // Cek apakah data adalah angka
                                      if (column >= 2 && column <= 4) { // Asumsikan kolom 'debit', 'kredit', dan 'saldo' ada di indeks 2, 3, dan 4
                                          // Hapus semua karakter titik
                                          return data.toString().replace(/\./g, '');
                                      }
                                      return data;
                                  },
                                  footer: function (data, row, column, node) {
                                      // Logika yang sama untuk footer
                                      return data.toString().replace(/\./g, '');
                                  }
                              },
                              columns: ':not(:last-child)'
                          }
                      },
                      {
                          extend: 'pdf',
                          footer: true,
                          exportOptions: {
                              columns: ':not(:last-child)'
                          }
                      },
                      {
                          extend: 'print',
                          footer: true,
                          exportOptions: {
                              columns: ':not(:last-child)'
                          }
                      }
                  ],
                  data: response.data,
                  columns: [
                      { data: 'tgl' },
                      { data: 'keterangan' },
                      { data: 'debit', className: 'text-right' },
                      { data: 'kredit', className: 'text-right' },
                      { data: 'saldo', className: 'text-right' },
                      { data: 'aksi', className: 'text-center' }
                  ],
                  // Konfigurasi tambahan DataTables
                  paging: false,
                  scrollY: 400,
                  scrollCollapse: true,
                  searching: false,
                  ordering: false,
                  footerCallback: function(row, data, start, end, display) {
                      $('#saldoAkhir').html(finalSaldoAkhir);
                  }
              });
              
              transaksiTable.buttons().container().appendTo('#transaksiTable_wrapper .col-md-6:eq(0)');

              // Perbarui saldo akhir di footer tabel
              //$('#saldoAkhir').html('<b>' + response.saldo_akhir + '</b>');
          },
          error: function(xhr, status, error) {
              console.error("Gagal memuat data:", error);
              // Tampilkan pesan error ke pengguna
          }
      });
  }

  function edit(id){
    $('#form_tgl').datetimepicker({
            format: 'Y-m-d H:i:s' // Format sesuai dengan kebutuhan
        });
      $.ajax({
        url : '<?=base_url('pemasukan/get_transaksi')?>/' + id,
        dataType : 'JSON',
        success : function(r){
          $('#form_nama').val(r.nama);     
          $('#form_tgl').val(r.tgl);     
          $('#form_jumlah').val(r.jumlah);     
        }
      })
      $('#form-edit').attr('action', '<?=base_url('pemasukan/edit_transaksi')?>');
      $('#tag_nama').show();     
      $('#tag_tgl').show();
      $('#form-title').html('Form Edit Pengeluaran');
      $('#edit').modal('show');
  }

  function detail(batch_id){
    $.ajax({
        url : '<?=base_url('keuangan/get_transaksi')?>/' + batch_id,
        dataType : 'JSON',
        success : function(r){
          console.log(r);
            $('#detail-transaksi').html(r.t);
            $('#detail').modal('show');
        }
      })
  }

  $(document).ready(function() {
      // Inisialisasi datetimepicker
      $('#start_date, #end_date').datetimepicker({
          format: 'Y-m-d' // Format sesuai dengan kebutuhan
      });
      
      // **[1] Saat dokumen siap, muat data untuk hari ini secara default**
      loadData($('#start_date').val(), $('#end_date').val());
      
      // **[2] Ketika tombol 'Cari' ditekan, muat data berdasarkan tanggal yang dipilih**
      $('#search_button').on('click', function() {
          let startDate = $('#start_date').val();
          let endDate = $('#end_date').val();
          loadData(startDate, endDate);
      });
  });
</script>