对包含多个表格的页面进行分页答案

【问题标题】：Paginate a page with more than one table对包含多个表格的页面进行分页
【发布时间】：2013-01-30 19:28:09
【问题描述】：

我有一个 JSP 页面，该页面将填充动态创建的表，其中的数据是从数据库中填充的。

这个页面看起来像这样

<div id="VehicleWrap">
   <form id="bookvehicle" method="post" action="bookvehicle">
       <table>
           <tr>
              <td class="label"><label id="lbodytype" for="transmission">Body Type</label></td>
              <td class="field"><input id="bodytype" name="bodytype" type="text" value="<%= vehicle.getBodyType()%>" maxlength="50" readonly/></td>
              <td class="status"></td>
           </tr>
           <tr>
              <td class="label"><label id="ltransmission" for="transmission">Transmission</label></td>
              <td class="field"><input id="transmission" name="transmission" type="text" value="<%= vehicle.getTransmission()%>" maxlength="50" readonly/></td>
              <td class="status"></td>
           </tr>
       </table>

       <table>
           <tr>
              <td class="label"><label id="lbodytype" for="transmission">Body Type</label></td>
              <td class="field"><input id="bodytype" name="bodytype" type="text" value="<%= vehicle.getBodyType()%>" maxlength="50" readonly/></td>
              <td class="status"></td>
           </tr>
           <tr>
              <td class="label"><label id="ltransmission" for="transmission">Transmission</label></td>
              <td class="field"><input id="transmission" name="transmission" type="text" value="<%= vehicle.getTransmission()%>" maxlength="50" readonly/></td>
              <td class="status"></td>
           </tr>
       </table>

       <table>
           <tr>
              <td class="label"><label id="lbodytype" for="transmission">Body Type</label></td>
              <td class="field"><input id="bodytype" name="bodytype" type="text" value="<%= vehicle.getBodyType()%>" maxlength="50" readonly/></td>
              <td class="status"></td>
           </tr>
           <tr>
              <td class="label"><label id="ltransmission" for="transmission">Transmission</label></td>
              <td class="field"><input id="transmission" name="transmission" type="text" value="<%= vehicle.getTransmission()%>" maxlength="50" readonly/></td>
              <td class="status"></td>
           </tr>
       </table>
   </form>
</div>

正如您在上面看到的，我将在表单和 div 中包含一个表列表。但是我不能将表格组成一个长表格并使用许多表格分页插件之一。

我将如何对此进行分页，例如，一个分页页面只有 5 个表格。

【问题讨论】：

你试过什么？为什么不能使用分页插件？为什么不按照分页插件满足您需求的方式来格式化表格？

标签： javascript jquery html pagination

【解决方案1】：

Flexipage 是一个jQuery 插件，用于对任何 HTML 内容进行分页。启发在Quick Paginate 插件中。

用法

要使用 flexipage 插件，请在文档的标签中包含 jQuery 和 jquery.flexipage：

<script src="javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.flexipage.js" type="text/javascript"></script>

然后像这样写一些 HTML：

<div>
  <ul class="fp-example">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    ...
    <li>Item 22</li>
    <li>Item 23</li>
    <li>Item 24</li>
    <li>Item 25</li>
  </ul>
</div>

然后启动flexipage

$('.fp-example').flexipage();

另外，请参阅以下资源：

【讨论】：

嗨，感谢您的快速回复，尽管我真正需要的是一种对单个表格集合进行分页的方法。因此，例如，他们将在一页上显示 10 个表格，我想将这些表格分开，以便一页上只显示 5 个。
啊...等一下，我会改变答案。 :)
@user667430 你能检查一下答案吗？