Default page

Viewing : list.php

<style type="text/css">
    .dtfc-fixed-left {
        background-color: white !important; /* Atau warna latar belakang tabel Anda */
    }
</style>
<div class="page-content">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="page-title mb-0 font-size-18"><?= $title ?></h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><?= $li_1 ?></a></li>
                        <?php if(isset($li_2)):  ?>
                            <li class="breadcrumb-item active"><?= $li_2 ?></li>
                        <?php endif ?>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-tools float-end">
                        <button onclick="add(0)" class="btn btn-sm btn-primary">Tambah</button>
                    </div>
                </div>
                <div class="card-body">
                    <table id="datatable-buttons" class="table table-striped table-bordered"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Nama</th>
                                <th>Tugas</th>                                
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            <?php foreach ($dt as $d): ?>
                            <tr>
                                <td><?= esc($d->id) ?></td>
                                <td><?= esc($d->nama ?? '-') ?></td>
                                <td><?= esc($id_toko_pegawai[$d->id_toko] ?? '-') ?></td>
                                <td>
                                    <a class="btn btn-sm btn-warning" onclick="add('<?=$d->id?>')">Edit</a>&nbsp;
                                    <a class="btn btn-sm btn-danger" onclick="hapus('tugas/delete/<?=$d->id?>')">Hapus</a></td>
                            </tr>
                            <?php endforeach ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->
</div>

<div class="modal fade bs-example-modal-lg" tabindex="-1" aria-labelledby="myLargeModalLabel" style="display: none;" aria-hidden="true" id="add">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="post" id="form-add"><?= csrf_field() ?>

                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="myLargeModalLabel">Form Tugas</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <?php
                        echo form_text('id');
                        echo form_text('nama');
                    ?>
                    <div class="mb-3 row">
                        <label class="col-md-2 col-form-label">ID Toko</label>
                        <div class="col-md-10">
                            <select class="form-select" name="id_toko" id="id_toko">
                                <option>--Pilih ID Toko--</option>
                                <?php
                                    foreach ($dt_toko as $t) {
                                        echo '<option value="'.$t->id.'">'.$t->nama.'</option>';
                                    }
                                ?>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="float-end btn btn-sm btn-primary">Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<script type="text/javascript">
	
$(document).ready(function() {
    //Buttons examples
    var table = $('#datatable-buttons').DataTable({
    	scrollX: true,
        dom: 'Blfrtip', // 'B' untuk Buttons, dan sisa elemen default        
        buttons: ['copy', 'excel', 'pdf'],
        processing: true,    // Tampilkan indikator loading
        serverSide: true,    // Aktifkan mode server-side
        paging: true,        // Paging diatur oleh server (true karena umum)
        scrollY: "60vh",     // Tinggi scroll vertikal
        scrollCollapse: true, // Scroll hanya jika diperlukan
        
        ajax: {
            url: "<?= base_url('tugas/table') ?>", // URL ke controller CI4 yang baru
            type: "GET", // Atau POST
            dataSrc: 'data' // Pastikan DataTables mengambil data dari kunci 'data' di JSON response
        },
        columns: [
            { data: 'id' },    // Sesuai dengan alias 'id' dari SELECT
            { data: 'nm_peg' },  // Sesuai dengan alias 'nama' dari SELECT
            { data: 'nama_toko' }, // Sesuai dengan alias 'tugas' dari SELECT
            { data: 'aksi' }, // Sesuai dengan alias 'tugas' dari SELECT
            // Jika Anda menambahkan kolom 'aksi' di PHP:
            // { data: 'aksi', orderable: false, searchable: false }
        ],
    });

    table.buttons().container()
        .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
    $("#datatable_length select").addClass('form-select form-select-sm');
    } );

    function add(id){
        $('#id').val(id);
        if(id == 0){
            $('#form-add').attr('action', '<?=base_url()?>tugas');
            $('#add').modal('show');
            $('.hide').removeClass('d-none')
        }else{
            $('.hide').addClass('d-none')
            $('#form-add').attr('action', '<?=base_url()?>tugas/edit');
            $.ajax({
                url: 'tugas/get/' + id,
                type: 'GET',
                dataType: 'json',
                success: function(d) {
                    console.log(d);
                    $('#nama').val(d.nama);
                    $('#id').val(d.id);
                    $('#id_toko').val(d.id_toko);
                    $('#add').modal('show');
                }
            })        
        }
    }
</script>