PHP,MYSQL,带有表排序器的HTML表

问题描述:

尝试将 tablesorter 添加到正在创建的页面中.我对jquery的了解很少,所以我猜那是我的错所在.我已经在页面的<head>区域中添加了所需的代码,并对表进行了必要的更改.我的表仍然像使用HTML一样呈现.想法?

Trying to add tablesorter added to a page I am creating. I know very little of jquery, so I'm guessing that's where my fault is. I've added the required code in the <head> area of my page, and made the necessary changes to my table. My table still renders as it would with just HTML. Ideas?

<html>
 <head>
  <title>Inventory</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
   <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
   <script type="text/javascript">
     $(document).ready(function(){ $("table").tablesorter(); });
   </script>
 </head>
 <body>
<?php
$con=mysqli_connect("localhost","user","pass","db_name");
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }


$query = "SELECT 
            products.name,
            products.sku,
            inventory.quantityfry,
            inventory.quantityjuv,
            inventory.quantityadult,
            inventory.notes,
            inventory.location,
            inventory.owner
          FROM 
            products
          INNER JOIN 
            inventory
          ON
            products.sku=inventory.sku";

$result = mysqli_query($con,$query) or die(mysqli_error($con));
echo "<table border='1' id='table' class='tablesorter'>
<thead>
<tr>
<th>Species</th>
<th>SKU</th>
<th>Fry Count</th>
<th>Juvie Count</th>
<th>Adult Count</th>
<th>Notes</th>
<th>Location</th>
<th>Owner</th>

</tr>
</thead>";

while ($row = mysqli_fetch_assoc($result)) {
    echo "<tbody>";
    echo "<tr>";
    echo "<td>" . $row['name'] . "</td>";
    echo "<td>" . $row['sku'] . "</td>";
    echo "<td>" . $row['quantityfry'] . "</td>";
    echo "<td>" . $row['quantityjuv'] . "</td>";
    echo "<td>" . $row['quantityadult'] . "</td>";
    echo "<td>" . $row['notes'] . "</td>";
    echo "<td>" . $row['location'] . "</td>";
    echo "<td>" . $row['owner'] . "</td>";
    echo "</tr>";
    echo "</tbody>";    
}

mysqli_free_result($result);

echo "</table>";

mysqli_close($con);
?>     
 </body>



</html>

谢谢!

三件事:

  1. 不要直接链接到tablesorter.com上的tablesorter-复制到您自己的服务器上,或在CDN上使用副本(这是我的 cdnjs.com 的tablesorter/docs/"rel =" nofollow>分叉的叉子 a>).
  2. 在HTML顶部添加<!DOCTYPE html>,否则IE会变成怪癖模式,这几乎会使您的网站看起来很糟糕.
  3. 正如@MikeB所述,以上代码将每行包装在tbody中,按如下所示纠正代码(这只是一个代码段):

  1. Don't link directly to tablesorter at tablesorter.com - make a copy to your own server, or use a copy at a CDN (this is of my fork of tablesorter at cdnjs.com).
  2. Include a <!DOCTYPE html> at the top of your HTML otherwise IE will change into quirks mode and pretty much make your site look bad.
  3. As @MikeB mentioned, the above code wraps every row in a tbody, correct the code as follows (this is just a snippet):

echo "<table border='1' id='table' class='tablesorter'>
<thead>
<tr>
<th>Species</th>
<th>SKU</th>
<th>Fry Count</th>
<th>Juvie Count</th>
<th>Adult Count</th>
<th>Notes</th>
<th>Location</th>
<th>Owner</th>

</tr>
</thead><tbody>";

while ($row = mysqli_fetch_assoc($result)) {

    echo "<tr>";
    echo "<td>" . $row['name'] . "</td>";
    echo "<td>" . $row['sku'] . "</td>";
    echo "<td>" . $row['quantityfry'] . "</td>";
    echo "<td>" . $row['quantityjuv'] . "</td>";
    echo "<td>" . $row['quantityadult'] . "</td>";
    echo "<td>" . $row['notes'] . "</td>";
    echo "<td>" . $row['location'] . "</td>";
    echo "<td>" . $row['owner'] . "</td>";
    echo "</tr>";

}

mysqli_free_result($result);

echo "</tbody></table>";