テーブルにデータテーブルを追加する（ワードプレス）

Question

私はプロジェクトにデータテーブルを追加しようとしていますが、矢印と検索バーが表示されますが、どちらも動作しません。

私はスクリプトとテーブルだけでページ上のコードをテストしようとしましたが、それはうまくいったのですが、Wordpressサイトに移動したときに問題が発生しました。

提案がありますか？私は/頭の後にjQueryとDataTableのスクリプトやCSSヘッダーページでは、だけでなく、テーブル自体のスクリプトを持っている：

<script> 
     $(document).ready(function(){ 
     $('#myTable').DataTable(); 
     }); 
    </script> 

私のテーブル自体が

 echo "<table id='myTable' class='display table' width='100%'>"; 
        echo "<thead>"; 
        echo "<tr>"; 
        echo "<th>Foster ID</th>"; 
        echo "<th>Foster's Name</th>"; 
        echo "<th>City</th>"; 
        echo "<th>E-Mail</th>"; 
        echo "</tr>"; 
        echo "</thead>"; 
        if(!empty($result)){ 
         foreach ($result as $results){ 
          $fosterId = $results->memberId; 
          $fosterName = $results->memberName; 
          $city = $results->city; 
          $email = $results->email; 
          echo "<tbody>"; 
          echo "<tr>"; 
          echo "<td>$fosterId</td>"; 
          echo "<td>$fosterName</td>"; 
          echo "<td>$city</td>"; 
          echo "<td>$email</td>"; 
          echo "</tr>"; 
         } 
        } else { 
         echo "<tr>"; 
         echo "<td colspan='5'>No Fosters</td>"; 
         echo "<tr>"; 
         echo "</tbody>"; 
        } 
        echo "</table>"; 

Answer 1

あなたのPHPコードのように見えますループにtbody要素が含まれています。また、DataTablesはテーブル本体のcolspan属性をサポートしていません。

修正したPHPコード：

echo "<table id='myTable' class='display table' width='100%'>"; 
echo "<thead>"; 
echo "<tr>"; 
echo "<th>Foster ID</th>"; 
echo "<th>Foster's Name</th>"; 
echo "<th>City</th>"; 
echo "<th>E-Mail</th>"; 
echo "</tr>"; 
echo "</thead>"; 
echo "<tbody>"; 
foreach ($result as $results){ 
    $fosterId = $results->memberId; 
    $fosterName = $results->memberName; 
    $city = $results->city; 
    $email = $results->email; 
    echo "<tr>"; 
    echo "<td>$fosterId</td>"; 
    echo "<td>$fosterName</td>"; 
    echo "<td>$city</td>"; 
    echo "<td>$email</td>"; 
    echo "</tr>"; 
} 
echo "</tbody>"; 
echo "</table>"; 

修正したJavaScriptコード：

$(document).ready(function(){ 
    $('#myTable').DataTable({ 
     "language": { 
      "emptyTable": "No Fosters" 
     } 
    }); 
});