0

これが重複した質問である場合は申し訳ありませんが、解決策を探すのに何時間も費やしましたが、成功しませんでした。そして、私の母国語ではない下手な英語も申し訳ありません。:(

これは私の問題です：

Spring 3.0.5で処理される Web アプリケーションがあります。私のJSPファイルの 1 つがデータベースからデータを取得し、それをテーブルに入れます。これは問題なく動作します。jquery プラグインtablesortを使用してテーブル内のフィールドを並べ替えようとしていますが、これもうまく機能したので、ページャー アドオンを使用しようとすると、おとぎ話が崩壊します。

tablesorter の Web のドキュメントにあるように、テーブルの最後に「id=anyname」を含むフォームを定義し、スクリプトで呼び出しましたが、機能しません。

ここに私は私のJSPファイルを残しました：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/style.css"/>" />
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/jquery.tablesorter.pager.css"/>" />
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.8.2.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.9.1.custom.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.9.1.custom.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.tablesorter.pager.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.tablesorter.js" />"></script>
<script>
    $(document).ready(function() { 
        $("#consulta")
        .tablesorter({
            headers: { 0: { sorter: false }, 1: { sorter: false }, 6: { sorter: false }},
            sortList: [[2, 0], [0, 0]],
            widthFixed: true,
            widgets: ['zebra']})
        .tablesorterPager({container: $("#pager")}); 
    }); 
</script>
</head>
<body>
/*
*
*
*
*/
<table id="consulta" class="tablesorter">
    <thead>
        <tr>
            <th>C&oacute;digo</th>
            <th>Especialidad</th>
            <th>Asunto</th>
            <th>Fecha</th>
            <th>Ciclo</th>
            <th>Estado</th>
            <th>Opciones</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${consultaSol}" var="solic">
            <c:url var="verUrl" value="/manage/mgmtSol/detalle?id=${solic.id}" />
        <tr>
            <td><c:out value="${solic.codigo}" /></td>
            <td><c:out value="${solic.especialidad}" /></td>
            <td><c:out value="${solic.asunto}" /></td>
            <td><c:out value="${solic.fecha}" /></td>
            <td><c:out value="${solic.ciclo}" /></td>
        <c:if test="${solic.estado == 0 }">
            <td>No atendido</td>
        </c:if>
        <c:if test="${solic.estado == 1 }">
            <td>Atendido</td>
        </c:if>
        <c:if test="${solic.estado == 2 }">
            <td>Resuelto</td>
        </c:if>
            <td><a href="${verUrl}">Ver Detalle</a></td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<div id="pager" class="pager">
    <form>
        <img src="<c:url value="/resources/imagenes/first.png" />" class="first"/>
        <img src="<c:url value="/resources/imagenes/prev.png" />" class="prev"/>
        <input type="text" class="pagedisplay" readonly="readonly"/>
        <img src="<c:url value="/resources/imagenes/next.png" />" class="next"/>
        <img src="<c:url value="/resources/imagenes/last.png" />" class="last"/>
        <select class="pagesize">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
        </select>
    </form>
</div>
</body>
</html>

テーブルソートが正常に機能する前にaiが言ったように、私は何が間違っているのかわかりませんが、ページャーオプションは機能しません。ところで、私はjquery 1.9.1を使用していて、それを1.8.2バージョンに変更しましたが、動作しません。

また、アプリケーションを実行すると、Chrome 開発者ツールに 1 つのエラーが表示されます。

Uncaught TypeError: Cannot call method 'addClass' of undefined

しかし、私はそれを理解していません.jquery-1.8.2.jsファイルからのものです。

お願い助けて！

前もって感謝します。

4

1 に答える 1

0

Mootie さん、返信ありがとうございます。問題はjqueryバージョンにありました.tablesorter v2.0.5はjQuery 1.9+でエラーを引き起こすようです. そこで、jquery のバージョンを 1.8.3 に変更したところ、問題なく動作しました。

情報を提供してくれた Mottie に再び感謝します。ご挨拶。

于 2013-05-20T14:01:56.423 に答える