CODEWITHSUNDEEP
phpjquerytablesorter
w00ds98
w00ds98

Reputation: 141

jQuery Tablesorter plugin - sortable headers not working

Ive been working on making my Tabes sortable and stumbled on tablesorter.

So I install it and follow the Documentation

Sadly I fail at the first step and dont know why.

Heres my scripts in the head tag:

<head>

    <meta charset="utf-8">  
    <script src="components/com_memberportal/events/jquery.tablesorter.min.js"></script>
    <script src="components/com_memberportal/events/jquery.tablesorter.pager.js"></script>
    <script>
        jQuery(function($) { 
            $("table") 
                .tablesorter({widthFixed: true, widgets: ['zebra']}) 
                .tablesorterPager({container: $("#pager")}); 

            $("#EventTable").tablesorter(); 
        }); 
    </script>
</head>

The paths are correct I checked that. So heres my table: 

         <table id="EventTable" class="tablesorter">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Type</th>
                    <th>Speaker</th>
                    <th>Subject</th>
                </tr>
            </thead>
            <tbody> 
                <?php 
                    while($row = mysqli_fetch_array($searchresult)):

                    $date = explode("-", $row['event_date']);
                    $time_gone = explode(" ", $date[2]);
                    $date_table = $time_gone[0] . "." . $date[1] . "." . $date[0];  
                ?>   
                <tr>
                    <td><?php echo $date_table;?></td>               
                    <td><?php echo $row['event_type_name'];?></td>

                    <?php 
                        $UserLink = "https://www.myhost.com/website/index.php?option=com_memberportal&view=profile&" . $row['firstname'] . "-" . $row['lastname'];
                        echo '<td><a href="' . $UserLink . '">', $row['firstname'], " " ,$row['lastname'] . '</a></td>';

                        $EventLink = "https://www.myhost.com/website/index.php?option=com_memberportal&view=event&" . $row['event_date'] . "&" . $row['event_subject'];
                        echo '<td><a href="' . $EventLink . '">', $row['event_subject'] . '</a></td>';

                    ?>
                </tr>
                <?php endwhile;?>
            </tbody>
        </table>

Basically I have a table listing events with 4 columns (date, type, speaker, subject).

All the information in the table is from my mysql database. I know that its a hardcoded table in the documentation but I assumed it would still work with mine, as long as I wrap the right tags around the right parts.

Anybody know what Im doing wrong?

Edit: A picture of my html table

enter image description here

Upvotes: 0

Views: 129

Answers (1)

Mottie
Mottie

Reputation: 86403

The problem is the added rows are all wrapped in their own <tbody> - you can't sort individual rows. Make the loop only add <tr>s. Something like this:

<tbody>
<?php 
    while($row = mysqli_fetch_array($searchresult)):

    $date = explode("-", $row['event_date']);
    $time_gone = explode(" ", $date[2]);
    $date_table = $time_gone[0] . "." . $date[1] . "." . $date[0];  
?>
<tr>
    <td><?php echo $date_table;?></td>
    <td><?php echo $row['event_type_name'];?></td>

    <?php 
        $UserLink = "https://www.myhost.com/website/index.php?option=com_memberportal&view=profile&" . $row['firstname'] . "-" . $row['lastname'];
        echo '<td><a href="' . $UserLink . '">', $row['firstname'], " " ,$row['lastname'] . '</a></td>';

        $EventLink = "https://www.myhost.com/website/index.php?option=com_memberportal&view=event&" . $row['event_date'] . "&" . $row['event_subject'];
        echo '<td><a href="' . $EventLink . '">', $row['event_subject'] . '</a></td>';

    ?>
</tr>
<?php endwhile;?>
</tbody>

Secondly, the original tablesorter is no longer being actively maintained. If you still want to use tablesorter, try my fork of tablesorter which you can drop in to replace without any changes in the javascript.

I would suggest combining the initialization code and using $(function(){...}); as newer versions of jQuery do not support the document ready format.

<script>
$(function() { 
    $("table") 
        .tablesorter({widthFixed: true, widgets: ['zebra']}) 
        .tablesorterPager({container: $("#pager")}); 

    $("#EventTable").tablesorter(); 
}); 
</script>

Upvotes: 1

Related Questions