Question

我有一个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个表。

Answer 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();

另外，请参阅以下资源：

分页包含多个表格的页面

1 个答案:

用法