代码之家 › 专栏 › 技术社区 › Derek

JQuery Tablesorter不会对会话脚本加载的MySQL PHP表进行排序

tablesorter mysql jquery php javascript

Derek · 技术社区 · 9 年前

我正在尝试添加一个JQueryTablesorter,让它对一个PHP表进行排序,并从显示页面之外的脚本加载。我知道数据正确进入表的位置,列标题可以单击,但当我单击标题时,数据不会排序。下面是页面代码:

<?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>

1 回复 | 直到 9 年前

Jay Blanchard Daan 9 年前

您正在添加 <tbody> 对于每一行而不是整个表:

<?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 到每行。然后添加洞口 表格主体 在开始循环之前,将第一个PHP块。循环完成后,关闭 表格主体 和 table 在 foreach 陈述