Tablesorter не будет отображать сортируемые заголовки

Я играл с этим кодом в течение последних 2 часов. Я просто не могу найти ошибку. С помощью приведенного ниже кода отображаются заголовок таблицы и тело, но заголовки не сортируются. Я пробовал различные варианты кода скрипта, но безрезультатно. Что мне не хватает?

    <!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>
Источник

2 ответа

Решение

Просто добавьте и вне цикла while.

 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>";
Источник

У меня была похожая проблема. Кажется, стиль также очень важен.

Я посмотрел на источник примера, например, http://tablesorter.com/docs/example-trigger-sort.html и единственное, чего не хватало - это стиля. В моем случае я добавил:

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

и колонны стали сортируемыми. Критическая часть стиля, я думаю, включает в себя кнопки для сортировки:

.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;
}
Источник
Другие вопросы по тегам