CODEWITHSUNDEEP
javascriptphpjquerytablesorter
Rescue9
Rescue9

Reputation: 338

Tablesorter will not display sortable headers

I've been playing with this code for the past 2 hours. I simply cannot find the error. With the code below, the table header and body display, but the headers are not sortable. I've tried various incarnations of the script code, but to no avail. What am I missing?

    <!DOCTYPE html>
    <head>
    <script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./Mottie-tablesorter-c1ce076/js/jquery.tablesorter.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
        {
            $("table").tablesorter();
        }
    );
    </script>
    </head>
    <?php
    /* Attempt MySQL server connection. Assuming you are running MySQL
    server with default setting (user 'root' with no password) */
    $link = mysqli_connect("localhost", "SECRET", "SECRET", "SECRET");

    // Check connection
    if($link === false){
        die("ERROR: Could not connect. " . mysqli_connect_error());
    }

    // Attempt select query execution
    $sql = "SELECT * FROM persons";
    if($result = mysqli_query($link, $sql)){
        if(mysqli_num_rows($result) > 0){
            echo "<table class=\"tablesorter\">";
            echo "<thead>";
             echo "<tr>";
             echo "<th>First Name</th>";
             echo "<th>Last Name</th>";
             echo "<th>Email</th>";
             echo "<th>FFID</th>";
             echo "<th>Street</th>";
             echo "<th>City</th>";
             echo "<th>State</th>";
             echo "<th>Zip</th>";
             echo "<th>Home Fire Dept</th>";
             echo "<th>Shirt Size</th>";
             echo "<th>Additional Shirts</th>";
             echo "<th>Friday Class</th>";
             echo "<th>Saturday Class</th>";
             echo "<th>Sunday Class</th>";
             echo "</tr>";
            echo "</thead>";
            while($row = mysqli_fetch_array($result)){
                echo "<tbody><tr>";
                    echo "<td>" . $row['first_name'] . "</td>";
                    echo "<td>" . $row['last_name'] . "</td>";
                    echo "<td>" . $row['email_address'] . "</td>";
                    echo "<td>" . $row['ffid_num'] . "</td>";
                    echo "<td>" . $row['address_street'] . "</td>";
                    echo "<td>" . $row['address_city'] . "</td>";
                    echo "<td>" . $row['address_state'] . "</td>";
                    echo "<td>" . $row['address_zip'] . "</td>";
                    echo "<td>" . $row['fire_dept'] . "</td>";
                    echo "<td>" . $row['wants_tshirt'] . "</td>";
                    echo "<td>" . $row['shirt_size'] . "</td>";
                    echo "<td>" . $row['additional_shirts'] . "</td>";
                    echo "<td>" . $row['friday_class'] . "</td>";
                    echo "<td>" . $row['saturday_class'] . "</td>";
                    echo "<td>" . $row['sunday_class'] . "</td>";
                echo "</tr></tbody>";
            }
            echo "</table>";

            // Close result set
            mysqli_free_result($result);
        } else{
            echo "No records matching your query were found.";
        }
    } else{
        echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
    }

    // Close connection
    mysqli_close($link);
    ?>
    </html>

Upvotes: 0

Views: 122

Answers (2)

kimbarcelona
kimbarcelona

Reputation: 1136

Just add and outside the while loop.

 echo "</thead><tbody>";
            while($row = mysqli_fetch_array($result)){
                echo "<tr>";
                    echo "<td>" . $row['first_name'] . "</td>";
                    echo "<td>" . $row['last_name'] . "</td>";
                    echo "<td>" . $row['email_address'] . "</td>";
                    echo "<td>" . $row['ffid_num'] . "</td>";
                    echo "<td>" . $row['address_street'] . "</td>";
                    echo "<td>" . $row['address_city'] . "</td>";
                    echo "<td>" . $row['address_state'] . "</td>";
                    echo "<td>" . $row['address_zip'] . "</td>";
                    echo "<td>" . $row['fire_dept'] . "</td>";
                    echo "<td>" . $row['wants_tshirt'] . "</td>";
                    echo "<td>" . $row['shirt_size'] . "</td>";
                    echo "<td>" . $row['additional_shirts'] . "</td>";
                    echo "<td>" . $row['friday_class'] . "</td>";
                    echo "<td>" . $row['saturday_class'] . "</td>";
                    echo "<td>" . $row['sunday_class'] . "</td>";
                echo "</tr>";
            }
            echo "</tbody></table>";

Upvotes: 1

Bruce Adams
Bruce Adams

Reputation: 5581

I have had a similar problem. It seems the style is critically important as well.

I looked at the source of the example e.g. http://tablesorter.com/docs/example-trigger-sort.html and the only thing missing was the style. In my case I added:

< link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet" >

and the columns became sortable. The critical part of the style is I think that it includes the buttons for sorting:

.tablesorter-default thead .headerSortUp,

.tablesorter-default thead .tablesorter-headerSortUp,

.tablesorter-default thead .tablesorter-headerAsc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
    border-bottom: #000 2px solid;
}

.tablesorter-default thead .headerSortDown,

.tablesorter-default thead .tablesorter-headerSortDown,

.tablesorter-default thead .tablesorter-headerDesc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
    border-bottom: #000 2px solid;
}

Upvotes: 0

Related Questions