Pager(Tablesort plugin) doesn't work in Spring View

StackOverflow https://stackoverflow.com/questions/16597198

Question

i'm sorry if this a duplicate question but i have spent hours looking for a solution without succeed. And sorry too for the bad English, is not my native language. :(

This is my problem:

I have a web application handled by Spring 3.0.5. One of my JSP files retrieve data from a database and put it into a table, this is workig fine. I'm trying to use the jquery plugin tablesort to sort the fields in the table, this worked fine for me too so i try to use the pager addon and that's when my fairy story falls.

I have defined a form with an "id=anyname" at the end of my table, as the docs in the web of tablesorter said, and call it in a script but it doesn't work.

Here i left my JSP file:

<%@ 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>

I don't know what i'm doing wrong, as a i said before the tablesort is working fine but the pager option don't. By the way i was using jquery 1.9.1 and the changed it to 1.8.2 version but it doesn't work.

Also, when i run the application, the Chrome developer tool shows one error:

Uncaught TypeError: Cannot call method 'addClass' of undefined

but i don't understand it, it's from the jquery-1.8.2.js file.

Help me please!

Thanks in advance.

Was it helpful?

Solution

Thanks to Mootie for the response. The problem was in the jquery version, it seems that tablesorter v2.0.5 cause errors in jQuery 1.9+. So i changed my jquery version to 1.8.3 and it worked just fine.

Thanks again to Mottie for give me that info. Greetings.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top