logo标签列表

jQuery加载+ DataTables

phpjqueryhtmlcssdatatables
3
我正在创建一款消息服务网站。应该有一个收件箱按钮，单击它后，将显示消息。我想使用DataTables插件来处理表格数据。我正在使用jquery load() 函数在收件箱点击事件上动态加载表格，并在事件功能的底部对所创建的表格调用 dataTable() 函数。不幸的是，没有发生任何事情，只有一个简单的表格没有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>";

可能出了什么问题？
1个回答
1

在表格加载完成后，您需要初始化表格。

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

请参阅load()以获取更多信息。
我原本以为它会一直阻塞到完成，所以下面的代码会在加载php文件后执行。但是按照你的方式更改后，确保dataTable()现在正在启动，但控制台上出现了一个错误：error - TheArtur
@TheArtur，可能是无效的表格结构，标题和正文中列数不匹配，还有许多其他问题。您需要展示完整的HTML以获取线索。 - Gyrocode.com
我已经编辑了第一篇帖子中的代码，包括SentItems.php中所有表格回显。 - TheArtur
@TheArtur，请展示结果HTML，而不是生成它的PHP代码。但是，如果$req['type']未定义，则正文中会缺少三列。 - Gyrocode.com
我已经为隐藏的<td>插入了额外的隐藏<th>，现在它可以正常工作了。非常感谢你。 - TheArtur
@TheArtur，您有5个标题列和6个正文列。 - Gyrocode.com
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接