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

javascript jquery html css jsp

12,493

Solution 1

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 .

Solution 2

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.

12,493

Author by

Pranav247

Updated on June 04, 2022

Comments

Pranav247 about 2 years
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.
Pranav247 about 9 years

Hi Praveen, My knowledge on html, javascript, ajax is very weak. I was looking for a very simple way that doesn't change the look of my table. My data is not coming from a database. The table data is derived from the output of a command run in cmd.
Praveen Kumar Purushothaman about 9 years

@Pranav I can understand buddy. Either hardcode the pages, or you need to use DataTables. Using it is very easy. You can get help from their website. Give it a try and let us know here. We all are here to help!