Search code examples
phpjquery-pluginstablesorter

Trouble using tablesorter jquery plug in with php generated table


I'm asking a user to fill out a form and I want to display that information in table format. Then, I want the user to be able to sort the table from the header row on each column. I am trying to use the jquery tablesorter plug in but cannot seem to get it to work. Does the plug in not work with PHP generated tables?

<!DOCTYPE HTML>
<html>
<head>
<title>Dashboard</title>
<link href ="table.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-latest.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script> 

<script type = "text/javascript">
$(document).ready(function() {
     $("#sortedtable").tablesorter();
});
</script>


</head>
<body>
<?php
unset($_SESSION['errors_record']);
define("WEB_DB", "server_db");
define("DB_USER", "root");              
define("DB_PASS", "prog");      
$db_host = "localhost";
MYSQL_CONNECT($db_host,DB_USER,DB_PASS);
mysql_select_db(WEB_DB);

?>

<p><h1>SRG TDE Technical Review Dashboard</h1></p>
<p>
<a href = "http://localhost/record_form.php"><button>Create a New Review Record</button></a>
<a href="login.php" style = "float:right;">Logout</a>
</p>
<div class="CSSTableGenerator">
<table id = "sortedtable" class = "tablesorter">
<thead>
                        <tr>
                            <th>Review Record ID</th>
                            <th>Project</th>
                            <th>Date</th>
                            <th>Author</th>
                            <th>Moderator</th>
                            <th>Portfolio Lead</th>
                            <th>Review Artifact Type</th>
                            <th>Review Artifact Name</th>
                            <th>Version</th>
                        </tr>

    $sql = "select record_id,project,date,author,moderator,portlead,rtype,rname,version from dashboard_table ORDER BY date DESC";
    $result = mysql_query($sql);
    $num = mysql_num_rows($result);


    if ($num)
    {

        while(list($record_id,$project,$date,$author,$moderator,$portlead,$rtype,$rname,$version) = mysql_fetch_row($result))
        {
?>
<?php $url="http://localhost/main_tab.php?record=" . $record_id ?>
<tbody>
        <tr>
        <td><?php echo "<a href = '$url'>$record_id</a>";?></td>
        <td><?php echo $project?></td>
        <td><?php echo $date?></td>
        <td><?php echo $author?></td>
        <td><?php echo $moderator?></td>
        <td><?php echo $portlead?></td>
        <td><?php echo $rtype?></td>
        <td><?php echo $rname?></td>
        <td><?php echo $version?></td>
        </tr>

        <?php



        }
    }

?>
</tbody>
</table>
</div>

</body>
</html>

Solution

  • I'm not that good with php, but it appears that the table being built will have every row wrapped in a new tbody. Move the initial <tbody> outside of the while loop:

        if ($num)
        {
    
            echo "<tbody>";  
            while(list($record_id,$project,$date,$author,$moderator,$portlead,$rtype,$rname,$version) = mysql_fetch_row($result))
            {
    ?>
    <?php $url="http://localhost/main_tab.php?record=" . $record_id ?>
            <tr>
            <td><?php echo "<a href = '$url'>$record_id</a>";?></td>
            <td><?php echo $project?></td>
            <td><?php echo $date?></td>
            <td><?php echo $author?></td>
            <td><?php echo $moderator?></td>
            <td><?php echo $portlead?></td>
            <td><?php echo $rtype?></td>
            <td><?php echo $rname?></td>
            <td><?php echo $version?></td>
            </tr>
    
            <?php
    
            }
        }
    
    ?>
    </tbody>