将数据表添加到表（wordpress）

Question

我试图将数据表添加到我的项目，它显示了箭头和搜索栏，但都没有工作。

我试着用脚本和表测试代码在页面上，它的工作，但当我把它移到我的WordPress的网站我遇到了问题。

有什么建议吗？我在标题页的jQuery和数据表的脚本和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" 
     } 
    }); 
});