jquery 加载 + 数据表答案

【问题标题】：jquery load + DataTablesjquery 加载 + 数据表
【发布时间】：2016-08-10 07:34:32
【问题描述】：

我正在创建一个消息服务网站。应该有一个收件箱按钮，点击后会显示消息。我想对表数据使用 DataTables 插件。我在收件箱点击事件上使用 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>

邮箱.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>";

可能出了什么问题？

【问题讨论】：

标签： php jquery html css datatables

【解决方案1】：

您需要在表加载后对其进行初始化。

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

更多信息请参见load()。

【讨论】：

我想，它会阻塞直到完成，所以加载函数下面的行将在加载 php 文件后执行。按照你的方式改变后，现在可以确定 dataTable() 正在启动，但控制台中出现错误：error
@TheArtur，它可能是无效的表结构，标题和正文中的列数不匹配，还有很多其他的事情。您需要显示完整的 HTML 以获得线索。
我已经编辑了第一篇文章中的代码，包括 SentItems.php 中的所有表回显
@TheArtur，请显示结果 HTML，而不是生成它的 PHP 代码。但是，如果未定义 $req['type']，则正文中将缺少三列。
我已经为隐藏的插入了额外的隐藏，它现在可以工作了。非常感谢。