Menu
I'm creating a message service website. There should be a Inbox button, and after clicking it, messages would be displayed. I would like to use DataTables plugin for the table data. I'm loading the table dynamically using jquery load() function on the Inbox click event, and at the bottom of the event function I call the dataTable() function on the created table. Unfortunately nothing happens, there is only a simple table without DataTables functionality.
Here is my code:
MailBox.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>";
What could be wrong?
811
asked Sep 09 '26 15:09
You need to initialize table after it has been loaded.
$('#messagePanel').load('MessageDir/SentItems.php', function(){
$("#sentItemsTable").dataTable();
});
See load() for more information.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
