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 行。应该有下图给出了一个链接下一/先前,第一/最后,页面 数量等,这将让你在表中的内容浏览。
请给我一些关于使用什么来实现这一目标的想法。如果您需要有关我的要求的更多信息,请告诉我。
小智 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 中搜索以上给定的名称来下载它,然后将其添加到您的项目文件夹中。此外,如果您有任何问题,请告诉我。