Cara Menambahkan Style Bootstrap 5 pada Server-Side Datatables CodeIgniter 4

Sebelumnya kita sudah berhasil melakukan Join 2 Table pada Server-Side Datatables. Kali ini kita akan sama-sama menambahkan styling Bootstrap 5 pada Datatables kita agar tampilan tablenya menjadi lebih menarik.

Persiapan

Pastikan sobat sudah mengikuti seri Datatables Server-Side CodeIngiter ini dari part pertama ya.. berikut daftarnya:

1. Cara Memasang Datatables Server-Side Processing pada CodeIgniter 4
2. Cara Menambahkan Button Aksi pada Server-side Datatables Codeigniter 4
3. Cara Join 2 Table pada Server-side Datatables Codeigniter 4

Jika sudah mari kita mulai.

Download Resource Tambahan DataTables + Bootstrap 5

Silahkan download file dibawah ini. Kemudian kosongkan folder app/public/plugin/. Lalu ekstrak file ini di dalam folder tersebut.

DataTables Bootstrap 5.zip 1.1 MB

Kemudian buka file app\Views\kelas-list.php ubah class Table nya menjadi.

table table-striped table-sm

Maka Hasilnya Akan Seperti ini :

Selanjutnya kita akan ubah class pada Action Buttons nya ya sobat. Masih pada file app\Views\kelas-list.php. 

Fokus pada bagian ini.

columnDefs: [{
   "targets": 3,
   "render": function(data, type, row, meta) {
               return `<a href="#${row.id_kelas}" onclick="alert('Edit data id=${row.id_kelas}')"><button>Edit</button></a> | <a href="#${row.id_kelas}" onclick="alert('Delete data id=${row.id_kelas}')"><button>Hapus</button></a>`;
             }
   }]

Silahkan ganti menjadi.

columnDefs: [{
      "targets": 3,
      "render": function(data, type, row, meta) {
                 return `<a class="btn btn-sm btn-warning" href="#${row.id_kelas}" onclick="alert('Edit data id=${row.id_kelas}')">Edit</a>
                    <a class="btn btn-sm btn-danger" href="#${row.id_kelas}" onclick="alert('Delete data id=${row.id_kelas}')">Hapus</a>`;
                }
       }]

Jika sudah, hasilnya akan seperti ini:

Nahh itu dia Cara Menambahkan Style Bootstrap 5 pada Datatables Server-Side CodeIgniter. Bagaimana berhasil?? jika belum bisa jangan sungkan, silahkan tanya dikolom komentar dibawah ini. Sekian untuk kali ini, semoga bermanfaat. 

Terima Kasih.