jquery load + DataTables

Question

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?

Gyrocode.com · Accepted Answer · 2016-04-18 14:12:38Z

1

You need to initialize table after it has been loaded.

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

See load() for more information.

answered Apr 18, 2016 at 14:12

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TheArtur Over a year ago

I thought, that it will block until finish, so lines below load function will execute after loaded php file. After changing it your way, for sure dataTable() is launching now, but there is an error in the console: error

Gyrocode.com Over a year ago

@TheArtur, it could be invalid table structure, mismatched number of columns in header and body, many other things. You would need to show full HTML for a clue.

TheArtur Over a year ago

I have edited the code from the first post including all the table echo's from the SentItems.php

Gyrocode.com Over a year ago

@TheArtur, please show the result HTML, not the PHP code that generates it. However if $req['type'] is not defined there would be three columns missing in the body.

TheArtur Over a year ago

I have insert additional hidden <th> for the hidden <td>, and its working now. Thank you very much.

|

Collectives™ on Stack Overflow

jquery load + DataTables

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related