jquery load + DataTables

我正在创建一个消息服务网站。应该有一个收件箱按钮，点击后，会显示消息。我想为表格数据使用DataTables插件。我正在使用收件箱点击事件中的jquery load()函数动态加载表格，并且在事件函数的底部，我在创建的表格上调用dataTable()函数。不幸的是，没有任何反应，只有一个没有DataTables功能的简单表格。jquery load + DataTables

这里是我的代码：

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>";

什么可能是错误的？

来源

2016-04-18 TheArtur

您需要在已加载之后初始化表。

$('#messagePanel').load('MessageDir/SentItems.php', function(){ $("#sentItemsTable").dataTable(); });

有关更多信息，请参阅load()。

来源

2016-04-18 14:12:38

我想，它会阻塞，直到完成，所以下面的加载函数行将加载后的PHP文件执行。改变你的方式后，确保dataTable（）现在正在启动，但是在控制台中有一个错误：[error]（http://i63.tinypic.com/2vdh939.png） – TheArtur

@TheArtur，它可能无效表结构，标题和正文中的列数不匹配等等。您需要显示完整的HTML以获取线索。 –

我编辑了第一篇文章中的代码，包括SentItems.php – TheArtur

jquery load + DataTables

回答

相关问题