Bootstrap dataTable 无法与 Codeigniter 中的数据库一起使用

Question

我是 bootstrap 和 codeigniter 的新手，我不知道为什么 dataTable 不能与 codeigniter 一起使用。

我尝试在 Bootstrap 中使用它。它工作正常（分页、数据输入、排序和搜索）。但是当我在 Codeigniter 中使用它并在我的 View 文件中使用相同的代码时，数据表似乎无法正常工作。它确实加载了数据，但没有显示功能（分页、数据输入、排序和搜索）。

有人可以帮助我吗？非常感谢！

---

我的旧文件仅使用 Bootstrap

<table id="myTable" class="table table-hover">
  <thead>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>NPM</th>
      <th>Kelas</th>
      <th>MP</th>
      <th>PK</th>
      <th>Pesan</th>
    </tr>
  </thead>
  <tbodys>
    <?php $no=0 ; $sql=m ysqli_query($con, "SELECT * FROM form"); while($row=m ysqli_fetch_array($sql)){ $no++; ?>
    <tr>
      <td>
        <?php echo $no ?>
      </td>
      <td>
        <?php echo $row[ 'Nama'] ?>
      </td>
      <td>
        <?php echo $row[ 'NPM'] ?>
      </td>
      <td>
        <?php echo $row[ 'Kelas'] ?>
      </td>
      <td>
        <?php echo $row[ 'MP'] ?>
      </td>
      <td>
        <?php echo $row[ 'PK'] ?>
      </td>
      <td>
        <?php echo $row[ 'Pesan'] ?>
      </td>
    </tr>
    <?php } ?>
    </tbody>
</table>
<script>
  $(document).ready(function() {
    $('#myTable').DataTable();
  });
</script>

---

这是我在 Codeigniter + Bootstrap 中的视图文件

<script type="text/javascript">
  jQuery(function($) {
        var oTable1 =
          $('#dynamic-table')
          .dataTable({
            bAutoWidth: false,
            "aoColumns": [{
                "bSortable": false
              },
              null, null, null, null, null, null, null, {
                "bSortable": false
              }
            ],
            "aaSorting": [],
          });
</script>
<table id="dynamic-table" method="post" class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>No</th>
      <th>Nama Lengkap</th>
      <th>Tanggal Mulai</th>
      <th>Tanggal Akhir</th>
      <th>Alasan</th>
      <th>File</th>
      <th>Nopeg</th>
      <th>Status</th>
    </tr>
  </thead>

  <tbody>
    <?php foreach ($hasil->result() as $row) { ?>
    <tr>
      <td>
        <?php echo $row->no ?></td>
      <td>
        <?php echo $row->nama ?></td>
      <td>
        <?php echo $row->tglm ?></td>
      <td>
        <?php echo $row->tgla ?></td>
      <td>
        <?php echo $row->alasan ?></td>

      <td>
        <a class="thumbnail" href="<?php echo base_url().'uploads/'.$row->file ?>">	
		  <img src="<?php echo base_url().'uploads/'.$row->file ?>" width="50" height="50">
		</a>

      </td>

      <td>
        <?php echo $row->nopeg; ?></td>
      <td>
        <button type="button" class="btn btn-pink btn-sm">Terima</button>
        <button type="button" class="btn btn-info btn-sm">Tolak</button>
      </td>
    </tr>
    <?php } ?>
  </tbody>
</table>

dataTable 包含在其模板中，在我显示来自数据库的数据之前，它可以正常工作。但是当我显示来自数据库的数据时，它只是一个普通的表

Answer 1

将javascript代码放在表格标签的末尾，

 <table id="dynamic-table" method="post" class="table table-striped table-   bordered table-hover">
<thead>
<tr>
  <th>No</th>
  <th>Nama Lengkap</th>
  <th>Tanggal Mulai</th>
  <th>Tanggal Akhir</th>
  <th>Alasan</th>
  <th>File</th>
  <th>Nopeg</th>
  <th>Status</th>
</tr>
</thead>

 <tbody>
<?php foreach ($hasil->result() as $row) { ?>
<tr>
  <td>
    <?php echo $row->no ?></td>
  <td>
    <?php echo $row->nama ?></td>
  <td>
    <?php echo $row->tglm ?></td>
  <td>
    <?php echo $row->tgla ?></td>
  <td>
    <?php echo $row->alasan ?></td>

  <td>
    <a class="thumbnail" href="<?php echo base_url().'uploads/'.$row->file ?>"> 
      <img src="<?php echo base_url().'uploads/'.$row->file ?>" width="50" height="50">
    </a>

  </td>

  <td>
    <?php echo $row->nopeg; ?></td>
  <td>
    <button type="button" class="btn btn-pink btn-sm">Terima</button>
    <button type="button" class="btn btn-info btn-sm">Tolak</button>
  </td>
</tr>
<?php } ?>
</tbody>
</table>    

<script type="text/javascript">
jQuery(function($) {
    var oTable1 =
      $('#dynamic-table')
      .dataTable({
        bAutoWidth: false,
        "aoColumns": [{
            "bSortable": false
          },
          null, null, null, null, null, null, null, {
            "bSortable": false
          }
        ],
        "aaSorting": [],
      });
 </script>

试试这样 :)