数据表函数在编码器中不起作用

Question

我试图在我的 CRUD 项目上使用数据表，但分页、升序-降序等功能在我的页面上不起作用，但我的朋友页面无需任何配置即可正常工作。我们目前正在进行同一个项目。所以这意味着我们拥有相同的资源和任何东西。我们正在为这个项目使用编码点火器。

这是我的代码(不起作用(：

<table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<form action="<?= base_url('projects/hapus_aksi/'); ?>" method="POST" id="form-delete">
<button id="reset" type="reset" value="Clear" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm">Clear</button>
<button type="button" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm" data-toggle="modal" data-target="#modalSearch">
Search
</button>
<button tombol-hapus id="btn-delete" type="submit" value="Delete" class="btn btn-primary float-right mb-2 mt-2 btn-sm mr-2" disabled>Delete</button>
<a style="color: white" id="btn-edit" class=" btn btn-primary float-right mb-2 mt-2 mr-2 btn-sm disabled-href">Edit</a>
<button type="button" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm" data-toggle="modal" data-target="#exampleModal">
Create
</button>
<tr role="row">
<th><input type="checkbox" class="check-all"/></th>
<th>No</th>
<th>Company Code</th>
<th>Project Code</th>
<th>Project Name</th>
<th>Project Description</th>
<th>Start Plan</th>
<th>Finish Plan</th>
<th>Start Actual</th>
<th>Finish Actual</th>
<th>Project Status</th>
<th>Created Date</th>
<th>Created By</th>
<th>Changed Date</th>
<th>Changed By</th>
</tr>
</thead>
<?php 
if ($count == 0) {
echo "No Data";
}else{
$no = 1;
foreach ($project as $d) : ?>
<tbody>
<tr role="row" class="odd"> 
<td><input type="checkbox" class="check-item" name="project_cd[]" value="<?= $d->project_cd; ?>"></td>
<td><?= $no++ ?></td>
<td><?= $d->company_cd ?></td>
<td><?= $d->project_cd ?></td>
<td><?= $d->project_nm ?></td>
<td><?= $d->project_desc ?></td>
<td><?= $d->start_plan_dt ?></td>
<td><?= $d->finish_plan_dt ?></td>
<td><?= $d->start_actual_dt ?></td>
<td><?= $d->finish_actul_dt ?></td>
<td><?= $d->project_sts ?></td>
<td><?= $d->created_dt ?></td>
<td><?= $d->created_by ?></td>
<td><?= $d->changed_dt ?></td>
<td><?= $d->changed_by ?></td>
</tr>
</tbody>
<?php endforeach; 
} ?>
</table>
</form>
</form>
</div>
</div>
</div>

然后，有我的朋友代码可以正常工作：

<table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<form action="<?= base_url('Resource/remove'); ?>" method="POST" id="form-delete">
<button id="reset" type="reset" value="Clear" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm">Clear</button>
<button type="button" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm" data-toggle="modal" data-target="#search">
Search
</button>
<button tombol-hapus id="delete" type="submit" value="Delete" class="btn btn-primary float-right mb-2 mt-2 btn-sm mr-2" disabled>Delete</button>
<a style="color: white" id="edit" class=" btn btn-primary float-right mb-2 mt-2 mr-2 btn-sm disabled-href">Edit</a>
<button type="button" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm" data-toggle="modal" data-target="#exampleModal">
Create
</button>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>No</th>
<th>Resource Code</th>
<th>Resource Name</th>
<th>Company Code</th>
<th>Created Date</th>
<th>Created By</th>
<th>Changed Date</th>
<th>Changed By</th>
</tr>
</thead>
<tbody>
<?php $no = 1;
foreach ($resource as $r) : ?>
<tr>
<td><input data-ok="false" aria-required="true" id="checkbox" type="checkbox" class="check-item" name="resource_cd[]" value="<?= $r['resource_cd']; ?>" onkeyup="success()"></td>
<td><?= $no++ ?></td>
<td><?= $r['resource_cd']; ?></td>
<td><?= $r['resource_nm']; ?></td>
<td><?= $r['company_cd']; ?></td>
<td><?= $r['created_dt']; ?></td>
<td><?= $r['created_by']; ?></td>
<td><?= $r['changed_dt']; ?></td>
<td><?= $r['changed_by']; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>

我们目前使用相同的js代码：

<!-- datatables -->
<script src="<?= base_url('assets/vendor/datatables/jquery.dataTables.min.js')?>"></script>
<script src="<?= base_url('assets/vendor/datatables/dataTables.bootstrap4.min.js')?>"></script>
<script>
$(document).ready(function(){
$('#dataTable').DataTable({
"searching": false
});
});
</script>

Answer 1

请为"tr"做循环，而不是像第二个foreach循环那样为"tbody"做循环。

<?php 
if ($count == 0) {
echo "No Data";
}else{
$no = 1;
foreach ($project as $d) : ?>
<tbody>
<tr role="row" class="odd"> 
<td><input type="checkbox" class="check-item" name="project_cd[]" value="<?= $d->project_cd; ?>"></td>
<td><?= $no++ ?></td>
<td><?= $d->company_cd ?></td>
<td><?= $d->project_cd ?></td>
<td><?= $d->project_nm ?></td>
<td><?= $d->project_desc ?></td>
<td><?= $d->start_plan_dt ?></td>
<td><?= $d->finish_plan_dt ?></td>
<td><?= $d->start_actual_dt ?></td>
<td><?= $d->finish_actul_dt ?></td>
<td><?= $d->project_sts ?></td>
<td><?= $d->created_dt ?></td>
<td><?= $d->created_by ?></td>
<td><?= $d->changed_dt ?></td>
<td><?= $d->changed_by ?></td>
</tr>
</tbody>
<?php endforeach; 
} ?>

<?php $no = 1;
foreach ($resource as $r) : ?>
<tr>
<td><input data-ok="false" aria-required="true" id="checkbox" type="checkbox" class="check-item" name="resource_cd[]" value="<?= $r['resource_cd']; ?>" onkeyup="success()"></td>
<td><?= $no++ ?></td>
<td><?= $r['resource_cd']; ?></td>
<td><?= $r['resource_nm']; ?></td>
<td><?= $r['company_cd']; ?></td>
<td><?= $r['created_dt']; ?></td>
<td><?= $r['created_by']; ?></td>
<td><?= $r['changed_dt']; ?></td>
<td><?= $r['changed_by']; ?></td>
</tr>
<?php endforeach; ?>

Answer 2

确保您的脚本在查看时已加载，您可以通过浏览器控制台签出。 用这个更改你的数据表脚本：

<script type="text/javascript">
$(document).ready(function(){
$('.data').DataTable();
});
</script>

然后在您的表类更改为以下内容：

<table class="data table table-bordered dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">

让我看看它是如何工作的:)

Answer 3

明确提到"$ is not defined"，这意味着从上面的 DataTable 库依赖于 jQuery。

所以，只需将jquery文件放在上面：

<!--Place your jQuery file here-->
<!-- datatables -->
<script src="<?= base_url('assets/vendor/datatables/jquery.dataTables.min.js')? 
>"></script>
<script src="<?= 
base_url('assets/vendor/datatables/dataTables.bootstrap4.min.js')?>"></script>
<script>
$(document).ready(function(){
$('#dataTable').DataTable({
"searching": false
});
});
</script>