我正在创建一个消息服务网站。应该有一个收件箱按钮，点击它后，就会显示消息。我想使用DataTables插件来处理表数据。我在Inbox点击事件上使用jquery load()函数动态加载表，在事件函数的底部，我在创建的表上调用dataTable()函数。不幸的是，什么都没发生，只有一个简单的表没有DataTables功能。
这是我的代码：
邮箱.php
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/mailbox.css">
<script src="js/jquery-2.2.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script src="js/mailBox.js"></script>
</head>
<body>
<div id = "nav">
</div>
<div id = "modals">
</div>
<div class="container-fluid">
<div class="row">
<div id="menuColumn">
</div>
<div id ="messageColumn">
<div class="col-md-10">
<div class="panel panel-default">
<div class="panel-body" id="messagePanel">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
mailBox.js
$(document).on("click", "#sentMenu", function(e){
$("li.active").removeClass("active");
$("#sentMenu").addClass("active");
$('#messagePanel').load('MessageDir/SentItems.php');
$(document).on('click', 'tr' , function (event) {
var reqId = $(this).find('td:last').text();
$('#messagePanel').load('MessageDir/SentItemsDetails.php',{ 'id': reqId });
});
$("#sentItemsTable").dataTable();
});
SentItems.php
echo "<table class='"table table-hover'" id='"sentItemsTable'">";
echo "<thead class='"thead-inverse'">
<tr>
<th>Type</th>
<th>To</th>
<th>Subject</th>
<th>Create date</th>
<th>Status</th>
</tr>
</thead>";
echo "<tbody class='"table-striped sentItemsTableBody'">";
while($req = mysqli_fetch_array($userReqResult)){
echo "<tr>";
$reqId = $req['id'];
if($req['type']==0){
$sqlMessage = "SELECT * FROM message WHERE idRequest = $reqId";
$messageResult = mysqli_query($db,$sqlMessage);
$message = mysqli_fetch_array($messageResult);
echo
"<td class='"messageItem'">Message</td>
<td>" . $message['toMail'] . "</td>
<td>" . $message['subject'] . "</td>";
}else if($req['type']==1){
echo
"<td class='"receiveItem'">Receive</td>
<td>Proxy server</td>
<td>---</td>";
}else if($req['type']==2){
echo
"<td class ='"registerItem'">Register</td>
<td>Proxy server</td>
<td>---</td>";
}
echo "<td>" . $req['createDate'] . "</td>";
if($req['status']==1){
echo "<td>Sent</td>";
}else{
echo "<td>Unsent</td>";
}
echo "<td class='"hidden'">".$reqId."</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
可能出了什么问题？
您需要在加载表后对其进行初始化。
$('#messagePanel').load('MessageDir/SentItems.php', function(){
$("#sentItemsTable").dataTable();
});
有关详细信息，请参见load()。