2016-04-18 17 views
3

私はメッセージサービスのWebサイトを作成しています。受信トレイボタンがあり、クリックするとメッセージが表示されます。私は、テーブルデータにDataTablesプラグインを使用したいと思います。私はテーブルを動的にjquery load()受信トレイのクリックイベントで機能を使用してロードしていますが、私はdataTable()という関数を作成したテーブルの関数と呼びます。残念なことに何も起こらず、DataTableの機能を持たない単純なテーブルしかありません。ここで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>"; 

何が間違っている可能性がありますか?

答えて

1

がロードされた後にテーブルを初期化する必要があります。

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

詳細については、load()を参照してください。

+0

私はそれが終了するまでブロックされるので、ロードされた関数の下の行はロードされたphpファイルの後に実行されると考えました。それを変更した後、dataTable()が起動していますが、コンソールにエラーがあります:[エラー](http://i63.tinypic.com/2vdh939.png) – TheArtur

+0

@TheArtur、無効な可能性がありますテーブル構造、ヘッダーとボディの列の数の不一致、他の多くのもの。ヒントを得るには完全なHTMLを表示する必要があります。 –

+0

SentItems.php – TheArtur