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