如何划分表格以分页显示?表格数据用jsp动态填充

Pra*_*247 3 html javascript css jquery jsp

我有一个使用HTMLand创建的表JSP。表的值是使用 JSP 动态创建的。我的代码类似于下图所示:

<link rel="stylesheet" type="text/css" href="css/table.css">
<HTML>
<BODY>
<div class="MyTable" >
<table border="0">
<thead>
<tr>
    <td><b>User</b></td>
    <td><b>Data</b></td>
</tr>
</thead>
<%

-----------------------
--- JAVA CODE ---------
-----------------------
if( condition )  //if condition satisfied, then a row of data is added
{
%>
<tr>
    <td><%= GENERATED_FROM_CODE %></td>
    <td><%= GENERATED_FROM_CODE %></td>
</tr>
<%
}
-----------------------
--- JAVA CODE ---------
-----------------------
%>
</BODY>
<HTML>
Run Code Online (Sandbox Code Playgroud)

有时数据很大,表变得很长。我想创建一个页面,其中只显示某个数字,比如一次显示10 行。应该有下图给出了一个链接下一/先前第一/最后页面 数量等,这将让你在表中的内容浏览。

请给我一些关于使用什么来实现这一目标的想法。如果您需要有关我的要求的更多信息,请告诉我。

Pra*_*man 5

您可以使用DataTables插件来缩短视图并分页。但最好在服务器端执行此操作,而不是在客户端执行此操作。DataTables 还为您提供 AJAX 和远程数据获取。


小智 5

最好的解决方案是使用 bootstrap table 。使用它是一项非常简单的任务,非常容易,您无需了解太多

按照下面给出的步骤

将下面给出的 css 和脚本添加到您的 jsp 页面

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
Run Code Online (Sandbox Code Playgroud)

让你的桌子像这样

<table id="table1" class="table table-bordered table-striped">
<thead>
          <tr>column1</tr>
          <tr>column2</tr>
          ....
          ....
</thead>
<tbody>
       <tr>
           <td>data1</td>
           <td><data2</td>
          ....
          ....
       </tr>
       <tr>
           <td>data11</td>
           <td><data22</td>
          ....
          ....
        </tr>
   </tbody>
 </table>
Run Code Online (Sandbox Code Playgroud)

还添加

<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>

<!-- DATA TABES SCRIPT -->
<script src="js/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {
    $("#table1").dataTable({
        "iDisplayLength": 10,
        "aLengthMenu": [[10, 25, 50, 100,  -1], [10, 25, 50, 100, "All"]]
       });
   });
  </script>
Run Code Online (Sandbox Code Playgroud)

这就是你会得到你想要的。如果您没有上面写的 .css 或 .js 文件。只需通过在 google 中搜索以上给定的名称来下载它,然后将其添加到您的项目文件夹中。此外,如果您有任何问题,请告诉我。