Bootstrap dataTable无法在Codeigniter中使用数据库

Question

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

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

任何人都可以帮助我吗？谢谢你的一团！

我的旧文件仅使用Bootstrap

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我在Codeigniter + Bootstrap中的View文件

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

试试这样：）