如何在客户端上设置分页以便从数据库显示数据？

Question

Hello fellow stackoverflowers, I'm building an e-commerce application in JSP. All my products are stored on server-side database (Mysql) in a table called product .

All the data product is already fetched/divided in multiple categories on the server-side in a table name category .

This is the JSP page used to display data on the client-side:

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

Now I'd like to dynamically fetch the data on the client-side using pagination. The options must be:

• Previous-Next
• showing (page of page)
• Show X results per page
  • And seeing the number of pages (1-2-3-4...)

I have tried many many JQuery pagination scripts but none of them worked and don't seem to accomplish what I want. There's no need for <thead> I just want to fetch partial lists when a user select a given category in the app store. Do you know any good scripts out there that could help me?

Answer 1

What you need is jQuery Datatable plugin:

https://datatables.net