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>Username</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            <?php foreach ($users as $user): ?>
                            <tr>
                                <td><?= esc($user->id) ?></td>
                                <td><?= esc($user->nama ?? '-') ?></td>
                                <td><?= esc($user->un ?? '-') ?></td>
                                <td><?= level($user->status)?></td>
                                <td>
                                    <a class="btn btn-sm btn-warning" onclick="add('<?=$user->id?>')">Edit</a>&nbsp;
                                    <a class="btn btn-sm btn-danger" onclick="hapus('user/delete/<?=$user->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 User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <?php
                        echo form_text('nama');
                        echo form_text('username');
                    ?>
                    <div class="mb-3 row hide">
                        <label for="example-text-input" class="col-md-2 col-form-label">Password</label>
                        <div class="col-md-10">
                            <input class="form-control" type="password" name="password">
                            <input class="form-control d-none" type="text" name="id" id="id">
                        </div>
                    </div>
                    <div class="mb-3 row hide">
                        <label for="example-text-input" class="col-md-2 col-form-label">Retype Password</label>
                        <div class="col-md-10">
                            <input class="form-control" type="password" name="retype_password">
                        </div>
                    </div>
                    <?php 
                    $o['options'] = array('Admin','User');
                    $o['value'] = array('1','2');
                    echo form_select('level', $o);?>
                </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,
    	fixedColumns: {
            leftColumns: 2 // Contoh: membekukan 1 kolom dari kiri
            // rightColumns: 1 // Contoh: membekukan 1 kolom dari kanan (opsional)
        },
        lengthChange: false,
        dom: 'Blfrtip', // 'B' untuk Buttons, dan sisa elemen default
        buttons: ['copy', 'excel', 'pdf'],
        paging:   false, // Menonaktifkan paging
        scrollY:  "60vh", // Mengatur tinggi area data tabel (sesuaikan nilai pixelnya)
        scrollCollapse: true // Opsional: mengecilkan tinggi container saat data tidak cukup mengisi
    });

    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()?>user');
            $('#add').modal('show');
            $('.hide').removeClass('d-none')
        }else{
            $('.hide').addClass('d-none')
            $('#form-add').attr('action', '<?=base_url()?>user/edit');
            $.ajax({
                url: 'user/get/' + id,
                type: 'GET',
                dataType: 'json',
                success: function(d) {
                    console.log(d);
                    $('#nama').val(d.nama);
                    $('#username').val(d.un);
                    $('#level').val(d.status);
                    $('#add').modal('show');
                }
            })        
        }
    }
</script>