CODEWITHSUNDEEP
javascriptphpjquerymysqltablesorter
Derek
Derek

Reputation: 27

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

I'm trying to add a JQuery Tablesorter and have it sort a table that is PHP and loaded from a script that is outside of the display page. I have it to where the data goes into the table correctly and the column headers are clickable but when I click on the header the data doesn't sort. Here is the code to the page: 

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

Upvotes: 2

Views: 696

Answers (1)

Jay Blanchard
Jay Blanchard

Reputation: 34416

You're adding a <tbody> for each row instead of for the overall 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>";
}

In addition you do not have a closing </table> tag.

To fix you need to remove the lines adding tbody to each row. Then add an opening tbody to your first PHP block before you start the loop. Once the loop is done close tbody and table outside of the foreach statement.

Upvotes: 2

Related Questions