JQuery Tablesorter 不会对由 session 脚本加载的 MySQL PHP table 进行排序

Question

我正在尝试添加一个 JQuery Tablesorter 并让它对 table 即 PHP 进行排序并从显示页面之外的脚本加载。我把它放在数据正确进入 table 的位置，并且 header 列是可点击的，但是当我点击 header 时，数据没有排序。这是页面的代码：

<?php
session_start();
$results = $_SESSION['results'];
?>

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Welcome | Mountain and Alpine Loan Centers</title>
        <meta name="description" content="Mountain and Alpine Loan Centers">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="tablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
        <script type="text/javascript" src="js/jquery-latest.js"></script>
        <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
         $("#test").tablesorter();
         });
        </script>
        </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div align="center">
        <img src="../img/Logo4_White_Black.jpg" height="126" width="266">
        <nav id="nav01"></nav></div>
        <div align="center"><br><br><br>
        </div>

            <?php
            if($results) {
    echo "<table id='test' class='tablesorter' border='2'>";
    echo "<thead>";
    echo "<tr>";
    echo "<th class='header'># of Records</th>";
    echo "<th class='header'>Date Set</th>";
    echo "<th class='header'>Branch</th>";
    echo "<th class='header'>Appointment Date</th>";
    echo "<th class='header'>Employee</th>";
    echo "<th class='header'>First Name</th>";
    echo "<th class='header'>Last Name</th>";
    echo "<th class='header'>Last Four</th>";
    echo "<th class='header'>Phone</th>";
    echo "<th class='header'>City</th>";
    echo "<th class='header'>State</th>";
    echo "<th class='header'>Zip</th>";
    echo "</tr>";
    echo "</thead>";


            foreach($_SESSION['results'] as $result) {

                echo "<tbody>";
                echo "<tr>";
                echo "<td>{$result['rows']}</td>";
                echo "<td>{$result['set_date']}</td>";
                echo "<td>{$result['branch']}</td>";
                echo "<td>{$result['appt_date']}</td>";
                echo "<td>{$result['employee']}</td>";
                echo "<td>{$result['fname']}</td>";
                echo "<td>{$result['lname']}</td>";
                echo "<td>{$result['last_four']}</td>";
                echo "<td>{$result['phone']}</td>";
                echo "<td>{$result['city']}</td>";
                echo "<td>{$result['state']}</td>";
                echo "<td>{$result['zip']}</td>";
                echo "</tr>";
                echo "</tbody>";

            }


}else{

    echo "No Records Found";
}
?>
</div>           

            <div align="center">
            <p>Return to the<a href="test.php">Test Page</a></p>
            </div>


        <script src="js/jquery-latest.min.map"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-latest.min.map"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="../js/script.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
        </body>
</html>

Answer 1

您要为每一行添加一个 <tbody> 而不是整体 table:

<?php
if($results) {
echo "<table id='test' class='tablesorter' border='2'>";
echo "<thead>";
echo "<tr>";
echo "<th class='header'># of Records</th>";
echo "<th class='header'>Date Set</th>";
echo "<th class='header'>Branch</th>";
echo "<th class='header'>Appointment Date</th>";
echo "<th class='header'>Employee</th>";
echo "<th class='header'>First Name</th>";
echo "<th class='header'>Last Name</th>";
echo "<th class='header'>Last Four</th>";
echo "<th class='header'>Phone</th>";
echo "<th class='header'>City</th>";
echo "<th class='header'>State</th>";
echo "<th class='header'>Zip</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";

foreach($_SESSION['results'] as $result) {

            echo "<tr>";
            echo "<td>{$result['rows']}</td>";
            echo "<td>{$result['set_date']}</td>";
            echo "<td>{$result['branch']}</td>";
            echo "<td>{$result['appt_date']}</td>";
            echo "<td>{$result['employee']}</td>";
            echo "<td>{$result['fname']}</td>";
            echo "<td>{$result['lname']}</td>";
            echo "<td>{$result['last_four']}</td>";
            echo "<td>{$result['phone']}</td>";
            echo "<td>{$result['city']}</td>";
            echo "<td>{$result['state']}</td>";
            echo "<td>{$result['zip']}</td>";
            echo "</tr>";

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

此外，您没有结束 </table> 标签。

要修复，您需要删除向每一行添加 tbody 的行。然后在开始循环之前将一个 tbody 添加到第一个 PHP 块。循环完成后，在 foreach 语句之外关闭 tbody 和 table。

JQuery Tablesorter 不会对由 session 脚本加载的 MySQL PHP table 进行排序

JQuery Tablesorter won't sort MySQL PHP table that is loaded by a session script

javascript

php

jquery

mysql

tablesorter