如何解决数据表未激活
我正在使用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
按钮时,可以看到数据表正在被激活。但是,一旦页面停止加载,数据表就会被停用。有什么想法吗?
解决方法
使用您的代码:
$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();
$().load
是异步的,因此当您(在完成加载之前)立即调用#tblApps
时,您的.DataTable()
不存在。
将呼叫添加到$ .load回调中:
$('#mainCTN').load("/src/view/apps.php",function() {
$('#tblApps').DataTable();
});
,
jUqery.load()从服务器加载数据,并将返回的HTML放入匹配的元素中。
加载的数据仅在加载后才可用,因此您需要在回调中运行数据表。
更改:
function loadApps(){
$('#mainCTN').load("/src/view/apps.php");
$('#tblApps').DataTable();
};
收件人:
function loadApps(){
$('#mainCTN').load("http://localhost:63342/StackOverflow/1.html",ftion() {
$('#tblApps').DataTable();
});
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。