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

Question

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>

PHP is server-side, jQuery is clent-side. Do you have any errors in the console? — Jay Blanchard
– Jay Blanchard, Commented Jul 30, 2015 at 16:09
@Jay Blanchard There are no error in the console. The data populates the table correctly just won't sort the data when I click on the header. — Derek
– Derek, Commented Jul 30, 2015 at 16:12
@JayBlanchard I'm not sure I can replicate this on jsFiddle. The data comes from the MySQL database depending on what is entered onto a form. I tried to put this on jsFiddle but it didn't work. You can see this form and then the next page by going here: link — Derek
– Derek, Commented Jul 30, 2015 at 16:31
@JayBlanchard I just tried this and it still won't sort data when I click on the column headers. Please feel free to look at this page here link use the 'Employee' name 'Brittany' and the date range July 1 - July 3. You will go tot the results page with data to see what's going on. Still won't sort even after making the changes you suggested. — Derek
– Derek, Commented Jul 30, 2015 at 16:52

Jay Blanchard · Accepted Answer · 2015-07-30 16:27:54Z

2

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.

edited Jul 30, 2015 at 16:27

answered Jul 30, 2015 at 16:20

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Derek Over a year ago

I just tried this and it still won't sort data when I click on the column headers. Please feel free to look at this page here link use the 'Employee' name 'Brittany' and the date range July 1 - July 3

Derek Over a year ago

Nevermind... It did work. I forgot to remove the </tbody> out of the loop. Thanks so much for your help. Works like a champ

Derek Over a year ago

I clicked the checkmark for your answer. Thanks again for your help with this

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related