Pranav247 Pranav247 - 1 month ago 10
CSS Question

How to divide table to show in pages? The table data is filled dynamically with jsp

I have a table created using

HTML
and
JSP
. The values of the table are created dynamically using the JSP. My code is similar to what is shown below:

<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>


Sometimes the data is large and the table becomes very long. I want to create a page where only a certain number, say 10 rows will be shown at a time. There should be a link below showing next / previous, first / last, page number etc., that will let you browse through the contents of the table.

Please give me some ideas on what to use to achieve this. Kindly tell me if you need some more information regarding my requirement.

Answer

The best solution is to go for bootstrap table . Using it is a very easy task very easy and you need not to know too much about it

follow the below given steps

add given below css and scripts to your jsp page

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

make your table like this

<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>

also add

<!-- 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>

That's all you will get what you want. If you don't have above written .css or .js file.Simply Download it by searching in google with above given name add to your project folder. Further if you have any problem please let me know .