Datatables未激活
Datatables未激活
提问于 2020-09-23 23:37:58
我正在使用JavaScript将一个文件加载到div中。它包含一个我想要激活为DataTable的表
panel.js：
document.getElementById('navBtnApps').addEventListener('click', loadApps);
function loadApps(){
$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();
};apps.php：
<div class="container pt-4">
<div class="col-12 border-bottom mb-5 pl-0">
<h3 class="display-4">
Your Apps
<button type="button" class="btn btn-success ml-2" data-toggle="modal" data-target="#new">
<i class="fas fa-plus mr-1"></i>
New
</button>
</h3>
</div>
<table id="tblApps" class="table table-striped">
<thead>
<tr>
<th>Application</th>
<th style="width:250px;">Action</th>
</tr>
</thead>
<tbody>
<?php foreach(scandir(dirname(__FILE__,3) . '/apps/') as $app){ ?>
<?php if(("$app" != "..") and ("$app" != ".") and ("$app" != ".htaccess")){ ?>
<tr>
<td><?=$app?></td>
<td>
<form method="post">
<a href="?p=apps&name=<?=$app?>" class="btn btn-sm btn-primary">
<i class="fas fa-eye mr-1"></i>
Details
</a>
<button type="submit" name="DeleteApp" value="<?=$app?>" class="btn btn-sm btn-danger">
<i class="fas fa-trash-alt mr-1"></i>
Delete
</button>
</form>
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
</div>当我快速按下索引中的navBtnApps按钮时，我可以看到数据表正在被激活。但是一旦页面停止加载，数据表就会被停用。你知道为什么吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-23 23:47:08
使用您的代码：
$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();$().load是异步的，所以当您立即(在完成加载之前)对#tblApps调用.DataTable()时，它并不存在。
将调用添加到$.load回调中：
$('#mainCTN').load("/src/view/apps.php", function() {
$('#tblApps').DataTable();
});Stack Overflow用户
发布于 2020-09-23 23:47:04
jUqery.load()从服务器加载数据，并将返回的HTML放入匹配的元素中。
加载的数据只有在加载后才可用，因此您需要在回调中运行datatable。
更改：
function loadApps(){
$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();
}; 至：
function loadApps(){
$('#mainCTN').load("http://localhost:63342/StackOverflow/1.html", ftion() {
$('#tblApps').DataTable();
});
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64031503
复制相关文章
相似问题
腾讯云开发者
