Question

我正在使用@ Andrey.Gubal的PaginateMyTable.js，一切看起来都非常简单，但它不适用于我的桌子。

这是我的jsp页面，其中包含表格：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ include file="include/header.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Students</title>
<link type="text/css" rel="stylesheet" href="<c:url value="/resources/css/jquery-ui.css"/>"/>
<script type='text/javascript' 
    src="<c:url value="/resources/js/jquery/jquery-1.9.1.js"/>"></script>
<script type='text/javascript' 
    src="<c:url value="/resources/js/jquery/jquery-ui.js"/>"></script>
<script type='text/javascript' 
    src="<c:url value="/resources/js/jquery/PaginateMyTable.js"/>"></script>
<script type="text/javascript">
$(".MyTable").paginate({
    jqueryui : true,
    showIfLess: false
    }); 
</script>
</head>
<body>

<div style="position:absolute;top:130px;">
<h2>Students</h2>

<c:url var="editImgUrl" value="/resources/img/edit.png" />
<c:url var="deleteImgUrl" value="/resources/img/delete.png" />
<c:url var="addImgUrl" value="/resources/img/add.png" />
<c:url var="studentsUrl" value="/essays/main/student/list" />
<form:form modelAttribute="studentAttribute" method="POST" action="${studentsUrl}">

 <table class="MyTable" style="border: 1px solid; width: auto; text-align:center">
 <thead style="background:#d3dce3">
  <tr>
   <th>Id</th>
   <th>First name</th>
   <th>Last name</th>
   <th>Roll number</th>
   <th>Program</th>
   <th colspan="2"></th>
  </tr>
 </thead>
 <tbody style="background:#ccc">
 <c:forEach items="${studentList}" var="student">
  <c:url var="editUrl" value="/essays/main/student/edit/${student.studentId}" />
  <c:url var="deleteUrl" value="/essays/main/student/delete?studentId=${student.studentId}" />
  <c:url var="addUrl" value="/essays/main/student/add" />

  <c:if test="${!empty studentList}">
   <tr>
    <td><c:out value="${student.studentId}" /></td>
    <td style="text-align: left"><c:out value="${student.firstName}"/></td>
    <td style="text-align: left"><c:out value="${student.lastName}"/></td>
    <td style="text-align: left"><c:out value="${student.indexNumber}"/></td>
    <td style="text-align: left"><c:out value="${student.program.programDescription}"/></td>
    <td><a href="${editUrl}"><img src="${editImgUrl}" style="border-style: none;"></img></a></td>
    <td><a href="${deleteUrl}"><img src="${deleteImgUrl}" style="border-style: none;"></img></a></td>
   </tr>
  </c:if>
  </c:forEach>
  <tr>
   <td colspan="7"><a href="${addUrl}"><img src="${addImgUrl}" style="border-style: none;"></img></a></td>
  </tr>
  </tbody>
 </table>
</form:form>
</div>
</body>
</html>

我包含了所有必要的js文件，但它仍然无效。我尝试删除<tbody>标记，因为在Andrey的演示中他没有使用它，仍然无法正常工作。有人可以帮忙吗？

Answer 1

可能是因为paginate函数调用太早了。

试试这个：

<script type="text/javascript">
$(document).ready(function() {
    $(".MyTable").paginate({
        jqueryui : true,
        showIfLess: false
    });
});
</script>

我正在做的是：将.MyTable分页移动到就绪功能。

试一试。：）

用于HTML表分页的jQuery插件不起作用

1 个答案: