Cara Menambahkan Button Aksi pada Server-side Datatables Codeigniter 4

Pada artikel sebelumnya saya sudah membuat tutorial bagaimana cara memasang datatables serverside pada codeigniter 4 ya sobat. Kali ini admin ingin menambahkan button aksi yang biasa digunakan untuk mengedit, menghapus, melihat detail, print, dll. 

Persiapan

Pertama, pastikan teman-teman sudah mengikuti tutorial sebelumnya ya 😂. Jika sudah bisa kita lanjut koding.

Memasang Action Button pada Server-side Datatables CI4

1. Silahkan buka kembali file app/Views/uang-list.php.
2. Lihat ke bagian bawah, perhatikan kode javascript berikut ini.

   <script type="text/javascript">        $('#matauang').DataTable({            processing: true,            serverSide: true,            ajax:{                url: '<?=base_url()?>/matauang/json'            },            columns: [                {data: 'id', name: 'id'},                {data: 'kode', name: 'kode'},                {data: 'nama_uang', name: 'nama_uang'}            ]        });  </script>

3. Tambahkan potongan columns.data dan columnDefs hasilnya bisa lihat dibawah ini. sobat bisa langsung ganti potongan kode diatas dengan kode berikut ini.

   <script type="text/javascript">        $('#matauang').DataTable({            processing: true,            serverSide: true,            ajax:{                url: '<?=base_url()?>/matauang/json'            },            columns: [                {data: 'id', name: 'id'},                {data: 'kode', name: 'kode'},                {data: 'nama_uang', name: 'nama_uang'},                {data: 'id', name: 'id'}            ],            columnDefs: [{                "targets": 3,                "render": function(data, type, row, meta) {                    return `<a href="#${row.id}" onclick="alert('Edit data id=${row.id}')"><button>Edit</button></a> | <a href="#${row.id}" onclick="alert('Delete data id=${row.id}')"><button>Hapus</button></a>`;                }            }]        });    </script>

4. Terakhir jangan lupa tambahkan kolom heading pada bagian thead.

   <tr>        <th>No</th>        <th>Kode</th>        <th>Mata Uang</th>        <th>Aksi</th>    </tr>

Jika sudah silahkan save, maka hasilnya akan menjadi seperti ini.

Bagaimana?

Cukup sekian untuk artikel kali ini, masih ada 2 bagian lagi yang perlu ditambahkan, tapi akan saya akan di lain waktu. Semoga bermanfaat 😀