Default page

Viewing : list.php

<div class="d-flex justify-content-between align-items-sm-center flex-column flex-sm-row mb-3">
    <div class="me-4 mb-3 mb-sm-0">
        <h1 class="mb-0"><?=$title?></h1>
    </div>
</div>

<div class="row">
    <div class="col-12 mb-4">
        <div class="card border-start-lg border-start-primary h-100 card card-header-actions">
            <div class="card-header">
                <div id="export"></div>
                <div class="card-tools">
                    <a class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add">Tambah</a>                    
                    <a class="btn btn-primary btn-sm" href="<?=base_url('tagihan/form/'.dc($pembayaran->id_pembayaran))?>">Download Form</a>                    
                </div>
            </div>                                               
            <div class="card-body">
                <div class="row mb-3 form-horizontal">
                    <div class="col-2">
                        <select id="smt" class="form-control">
                            <option value="">--SMT--</option>
                            <?php 
                                for($i=1; $i<15; $i++){
                                    echo '<option value="'.$i.'">'.$i.'</option>';
                                }
                            ?>
                        </select>
                    </div>

                    <div class="col-2">
                        <select id="jurusan" class="form-control">

                            <option value="">--Jurusan--</option>
                            <?php 
                            $juru = ['', 'S1 PAI', 'S1 PS', 'S2 PAI', 'S1 MPI', 'S1 ES', 'S1 HES', 'S1 HKI', 'S2 HKI', ];    for($i=1; $i<count($juru); $i++){
                                    echo '<option value="'.$i.'">'.$juru[$i].'</option>';
                                }
                            ?>
                        </select>
                    </div>

                    <div class="col-2">
                        <select id="angkatan" class="form-control">

                            <option value="">--Angkatan--</option>
                            <?php 
                            for($i=20; $i<31; $i++){
                                    echo '<option value="'.$i.'">NIM '.$i.'xxxx</option>';
                                }
                            ?>
                        </select>
                    </div>

                    <div class="col-2">
                        <select id="kelompok" class="form-control">
                            <option value="">--Kelompok--</option>
                            <?php 
                                foreach ($kelompok as $k) {                               
                                    echo '<option value="'.$k->id_kelompok.'">'.$k->nama.'</option>';
                                }
                            ?>
                        </select>
                    </div>
                    <div class="col-3">
                        <a class="btn btn-success" onclick="getTagihan()">Filter</a>
                    </div>
                </div>
                <table id="myTable" class="table table-striped table-bordered" style="width:100%">
                    <tfoot>
                        <tr>
                            <th></th> <th></th> <th>Total</th> <th></th> <th></th>    
                            <th></th> <th></th> <th></th> <th></th> <th></th> 
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form method="post" id="form_<?=$title?>" action="<?=base_url('tagihan/verifikasiInput')?>" enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title">Form <?=$title?></h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" name="data_id" class="d-none" id="data_id" value="<?=$pembayaran->id_pembayaran?>">
                    <?php
                        echo csrf_field();
                        echo form_file('file');
                    ?>
                </div>
                <div class="modal-footer"><button class="btn btn-primary" type="submit">Save</button></div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editTagihan" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form method="post" id="form_<?=$title?>" action="<?=base_url('tagihan/edit')?>" enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title">Form <?=$title?></h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" name="data_id" class="d-none" id="id_tagihan">
                    <?php
                        echo csrf_field();
                        echo form_text('jumlah');
                    ?>
                </div>
                <div class="modal-footer"><button class="btn btn-primary" type="submit">Save</button></div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        //loadData();
    })

    function getTagihan(){
        $.ajax({
            url : '<?=base_url('tagihan/getTagihan')?>',
            data : {
                jurusan : $('#jurusan').val(),
                smt : $('#smt').val(),
                kelompok : $('#kelompok').val(),
                angkatan : $('#angkatan').val(),
                id_pembayaran : '<?=$pembayaran->id_pembayaran?>'
            },
            method : 'POST',
            dataType : 'JSON',
            success : function(r){
                if ($.fn.DataTable.isDataTable('#myTable')) {
                    $('#myTable').DataTable().destroy();
                    $('#myTable tbody').empty(); // Kosongkan tbody
                }

                loadData(r);
            }
        });
    }

    function loadData(data){
        var jml = data.jml;
        var beasiswa = data.beasiswa;
        var sisa = data.sisa;
        var bayar = data.bayar;
        var table = $('#myTable').DataTable({
            data : data.data,
            dom: 'Blfrtip',
            columns: [
                { 
                    data: null, 
                    title: 'No.',
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    },
                    orderable: false // Tidak bisa diurutkan
                },
                { data: 'nim', title: 'NIM' },
                { data: 'nama', title: 'Nama Mahasiswa' },
                { data: 'smt', title: 'SMT' },
                { data: 'prodi', title: 'Prodi' },
                { data: 'jml', title: 'Jumlah' },
                { data: 'beasiswa', title: 'Beasiswa' },
                { data: 'bayar', title: 'Terbayar' },
                { data: 'sisa', title: 'Terhutang' },
                { data: 'aksi', title: 'Aksi'} 
            ],
            scrollX: true,
            lengthMenu: [
                // [Nilai Angka, Nilai Angka, ..., -1 (untuk 'All')]
                [ 10, 25, 50, 100, -1 ],
                
                // [Label Teks, Label Teks, ..., 'Label All']
                [ '10', '25', '50', '100', 'Semua' ] 
            ],
            buttons: [
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: ':not(:last-child)' // Pengecualian kolom terakhir
                    },
                    footer: true,
                    className: 'btn btn-primary btn-sm',
                },
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: ':not(:last-child)' // Pengecualian kolom terakhir
                    },
                    footer: true,
                    className: 'btn btn-primary btn-sm',
                },
                {
                    extend: 'print',
                    exportOptions: {
                        columns: ':visible:not(:last-child)' // Pengecualian kolom terakhir & kolom tersembunyi
                    },
                    footer: true,
                    className: 'btn btn-primary btn-sm',
                }
            ],
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();                
                const totalCells = $(row).find('th');
                console.log(totalCells);
                totalCells.eq(5).html(jml);
                totalCells.eq(6).html(beasiswa);
                totalCells.eq(7).html(bayar);
                totalCells.eq(8).html(sisa);
            }
        });

        table.buttons().container().appendTo('#export');
        
    }

    function editTagihan($id){
        $('#id_tagihan').val($id);
        $('#editTagihan').modal('show');
    }

</script>