Pranav247
Pranav247

Reputation: 57

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.

Upvotes: 3

Views: 17622

Answers (2)

Aditya Lodha
Aditya Lodha

Reputation: 106

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 .

Upvotes: 5

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You may use DataTables plug-in to cut short your view and paginate. But it is better to do this on the server side rather than having it on the client side. DataTables also provide you with AJAX and Remote Data fetching.

Upvotes: 5

Related Questions