JQuery - nie działa tablesorter

0

Witam,

chciałem posortować tablice w jquery i tak jak na kursie zrobilem, pobrałem skrypty, dodalem linijke w head i dodalem skypt do pliku,

Ale nadal nie chce dzialac, mógłby ktos doradzić?

 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: head">
    <script type="text/javascript" src="../static/js/jquery-latest.js"></script>
    <script type="text/javascript" src="../static/js/jquery.tablesorter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                    $("#myTable").tablesorter();
                }
        );

    </script>
</head>
<body>
<nav th:replace="layout :: header"></nav>

<div class="container main-content list">
    <div th:if="${success}" class="row alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        <span th:text="${success}"></span>
    </div>

    <th:block th:if="${#lists.isEmpty(movies)}">
        <h3 th:text="#{greeting.header}"></h3>
    </th:block>

    <th:block th:unless="${#lists.isEmpty(movies)}">
        <div class="row">
            <a th:href="@{/create}" class="btn btn-success pull-left">
                <span class="glyphicon glyphicon-plus" th:text="#{add}"></span>
            </a>
            <form class="form-inline pull-right" action="#" th:action="@{/search}" method="GET">
                <div class="form-group">
                    <input type="text" class="form-control" name="q"
                           placeholder="..."/>
                </div>
                <button type="submit" class="btn btn-primary" th:text="#{search}"></button>
            </form>
        </div>


        <div class="row">

            <table class="table table-bordered table-hover" id="myTable">
                <thead>
                <tr>

                    <th>ID</th>

                    <th th:text="#{name}"></th>
                    <th th:text="#{type}"></th>
                    <th th:text="#{date}"></th>
                    <th th:text="#{length}"></th>
                    <th th:text="#{rate}"></th>
                    <th th:text="#{watch}">?</th>
                    <th th:text="#{edit}">Edytuj</th>
                    <th th:text="#{delete}">Usuń</th>

                </tr>
                </thead>
                <tbody>
                <tr th:each="movie,iterStat : ${movies}">
                    <td th:text="${iterStat.count}"></td>
                    <td th:text="${movie.name}"></td>
                    <td th:text="${movie.type}"></td>
                    <td th:text="${movie.date}"></td>
                    <td th:text="${movie.length}"></td>
                    <td th:text="${movie.rate}"></td>
                    <td th:text="${movie.watch}"></td>


                    <td><a th:href="@{/{id}/edit(id=${movie.id})}"><span
                            class="glyphicon glyphicon-pencil"></span></a></td>
                    <td><a th:href="@{/{id}/delete(id=${movie.id})}"><span
                            class="glyphicon glyphicon-trash"></span></a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </th:block>
</div>
<!-- /.container -->


<footer th:replace="layout :: footer"></footer>
</body>
</html>
0

A biblioteka jquery-ui zaimportowałeś?

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
0

Przerzuć skrypt z tablesortem na koniec tagu body.

1

@up
Nieważne, nie zauważyłem, że jest document.ready :D

1 użytkowników online, w tym zalogowanych: 0, gości: 1