Datatables Plugin Not Working with no error or hint

I have already installed DataTables on my web app , i have configured its JS dan CSS as below :

here is the head JS include

<!--   Core JS Files   -->
<script src="<?= base_url('assets/js/core/jquery-3.7.1.min.js') ?>"></script>

<!-- Custom Plugins Sweetalert, Cookies, Etc -->
<script src="<?= base_url('assets/js/plugins.js') ?>" type="text/javascript"></script>
<script src="<?= base_url('assets/js/core/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= base_url('assets/js/core/popper.min.js') ?>"></script>
<script src="<?= base_url('assets/js/core/bootstrap-material-design.min.js') ?>"></script>

<!-- DataTables JavaScript -->
<script src="<?= base_url('assets/js/core/datatables.min.js') ?>"></script>
<script src="<?= base_url('assets/js/core/dataTables.bootstrap5.js') ?>"></script>

<script src="<?= base_url('assets/js/plugins/perfect-scrollbar.jquery.min.js') ?>"></script>
<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="<?= base_url('assets/js/plugins/nouislider.min.js') ?>"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="<?= base_url('assets/js/material-dashboard.js') ?>" type="text/javascript"></script>
<!-- Custom JS App -->
<script src="<?= base_url('assets/js/plugins/file-uploader/js/jquery.dm-uploader.min.js'); ?>"></script>
<script src="<?= base_url('assets/js/plugins/file-uploader/js/ui.js'); ?>"></script>

<script src="<?= base_url('assets/js/custom.js') ?>" type="text/javascript"></script>

the CSS file

<!-- CSS Files -->
<link href="<?= base_url('assets/css/dataTables.bootstrap5.css'); ?>" rel="stylesheet" />
<link href="<?= base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet" />
<link href="<?= base_url('assets/fonts/fonts.css?v=1.0.0'); ?>" rel="stylesheet" />
<link href="<?= base_url('assets/css/material-dashboard.css'); ?>" rel="stylesheet" />
<link href="<?= base_url('assets/css/style.css?v=1.0.0'); ?>" rel="stylesheet" />
<link rel="stylesheet" href="<?= base_url('assets/js/plugins/file-uploader/css/jquery.dm-uploader.min.css'); ?>" />
<link rel="stylesheet" href="<?= base_url('assets/js/plugins/file-uploader/css/styles-1.0.css'); ?>" />

<link rel="apple-touch-icon" sizes="76x76" href="<?= base_url('assets/img/apple-icon.png'); ?>">
<link rel="icon" type="image/png" href="<?= base_url('assets/img/favicon.png'); ?>">

the script on the head :

<script>
     $(document).ready(function() {
         $('#example').DataTable({
            responsive: true
        });
    });
</script>

the Data Table Section with id “example” :

<div class="card-body">
   <?php if (!$empty) : ?>
      <table class="table table-striped" id="example">
         <thead class="text-primary">
            <th width="20"><input type="checkbox" class="checkbox-table" id="checkAll"></th>
            <th><b>No</b></th>
            <th><b>#</b></th>
            <th><b>NIS</b></th>
            <th><b>Nama Siswa</b></th>
            <th><b>Jenis Kelamin</b></th>
            <th><b>Kelas</b></th>
            <th><b>Jurusan</b></th>
            <th><b>No HP</b></th>
            <th width="1%"><b>Aksi</b></th>
         </thead>
         <tbody>
            <?php $i = 1;
            
            foreach ($data as $value) : 
            
            $photo = $value['photo'];
            if($photo == NULL || $photo == '' || empty($photo)){
                $photo = "profil.png";
            }
            
            ?>
               <tr>
                  <td><input type="checkbox" name="checkbox-table" class="checkbox-table" value="<?= $value['id_siswa']; ?>"></td>
                  <td><?= $i; ?></td>
                  <td><img src="<?= base_url('uploads/photo/'.$photo) ?>" width="50px" height="50px"></td>
                  <td><?= $value['nis']; ?></td>
                  <td><b><?= $value['nama_siswa']; ?></b></td>
                  <td><?= $value['jenis_kelamin']; ?></td>
                  <td><?= $value['kelas']; ?></td>
                  <td><?= $value['jurusan']; ?></td>
                  <td><?= $value['no_hp']; ?></td>
                  <td>
                     <div class="d-flex justify-content-center">
                        <a title="Edit" href="<?= base_url('admin/siswa/edit/' . $value['id_siswa']); ?>" class="btn btn-primary p-2" id="<?= $value['nis']; ?>">
                           <i class="material-icons">edit</i>
                        </a>
                        <form action="<?= base_url('admin/siswa/delete/' . $value['id_siswa']); ?>" method="post" class="d-inline">
                           <?= csrf_field(); ?>
                           <input type="hidden" name="_method" value="DELETE">
                           <button title="Delete" onclick="return confirm('Konfirmasi untuk menghapus data');" type="submit" class="btn btn-danger p-2" id="<?= $value['nis']; ?>">
                              <i class="material-icons">delete_forever</i>
                           </button>
                        </form>
                        <a title="Download QR Code" href="<?= base_url('admin/qr/siswa/' . $value['id_siswa'] . '/download'); ?>" class="btn btn-success p-2">
                           <i class="material-icons">qr_code</i>
                        </a>
                     </div>
                  </td>
               </tr>
            <?php $i++;
            endforeach; ?>
         </tbody>
      </table>
   <?php else : ?>
      <div class="row">
         <div class="col">
            <h4 class="text-center text-danger">Data tidak ditemukan</h4>
         </div>
      </div>
   <?php endif; ?>
</div>

the html view still not work like this :

can somebody tell me what am i doing wrong ?