如何在客户端设置分页以从数据库中显示数据?

时间:2015-04-02 18:58:04

标签: jquery html database pagination client-server

Hello stackoverflowers,我在JSP中构建了一个电子商务应用程序。我的所有产品都存储在名为product的表中的服务器端数据库(Mysql)中。

所有数据产品已在服务器端以表名category中的多个类别提取/分割。

这是用于在客户端显示数据的JSP页面:

<table class="producTable" style="text-align: left; width: 100%;" cellspacing="40px">

  <c:forEach var="product" items="${categoryProducts}" varStatus="iter">

    <td>
      <tbody>

          <tr>
          <td style="vertical-align: middle; text-align: center;" class="cell">
            <a href="viewProduct?${product.id}">



              <img class="img" alt="" src="${initParam.productImagePath}${product.name}.jpg" />

              <div class="caption">
                <br>view details</div>

            </a>
            <br>


          </td>

          <td style="vertical-align: middle; width: 140px; text-align: center; ">${product.name}
            <br>
          </td>

          <td style="vertical-align: middle; width: 120px; text-align: center; line-height:100%;">$${product.price}
            <br>
          </td>

          <td style="vertical-align: middle; width: 136px; text-align: center; line-height:20%;">

            <form id="wishlistForm" action="addToWishlist" method="post">
              <br>
              <br>
              <input name="productId" value="${product.id}" type="hidden">

              <input class="submit" onclick="addedWishlist()" value="<fmt:message key='AddToWishlist'/>" type="submit">
            </form>
            <br>
          </td>
          <td style="vertical-align: middle; width: 136px; text-align: center; line-height:20%;">


            <form id="cartForm" action="addToCart" method="post">
              <br>
              <br>

              <input name="productId" value="${product.id}" type="hidden">
              <input class="submit" onclick="addedCart()" value="<fmt:message key='AddToCart'/>" type="submit">


            </form>
            <br>
          </td>
        </tr>


      </tbody>
  </c:forEach>
</table>

现在我想使用分页动态地在客户端获取数据。选项必须是:

  • 上一页-下一步
  • 显示(页面)
  • 每页显示X个结果
    • 看到页数(1-2-3-4 ......)

我尝试了很多JQuery分页脚本,但没有一个能够工作,似乎没有达到我的目的。我不需要<thead>我只想在用户选择应用商店中的给定类别时获取部分列表。你知道那些可以帮助我的好脚本吗?

1 个答案:

答案 0 :(得分:0)

您需要的是jQuery Datatable插件:

https://datatables.net