0

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

4

1 回答 1

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

另外,请参阅以下资源:

于 2013-01-30T11:12:42.040 回答