Responsive Table in JSP with Footable.js

I wrote few posts on topics based on responsive design in the recent days. It is always a pain to browse a table in a webpage especially in smaller screens. So once again, in this post I am going to write on how to display a table in JSP with server side pagination that is made to be responsive with Footable.js(a jquery plugin that makes tables in a webpage look great in smaller screens). Simple HTML table demo and explanation of the same can be found here. This is a new plugin developed by Brad Vincent & team, and so far they have added sorting and filtering functionalities to it. 



FooTable is very simple:
  1. It hides certain columns of data at different resolutions (we call these breakpoints).
  2. Rows become expandable to show the data that was hidden.
One disadvantage for now is there is no add-on for pagination which I think is very important for tables with large number of rows. But we can expect an add-on for client side pagination from them in the near future. 

To do server side pagination, I am going to use MySql's SQL_CALC_FOUND_ROWS option. I am not going to explain server side pagination in detail, since responsive table is what I am more concerned here. This is one good article which explains server side pagination in servlet and jsp.

1. First of all create a mysql table with more than five columns and fill it with data.


2. Download Footable jquery plugin from here.


3. Create a Java dynamic web project in Eclipse or in any other IDE that you use and add a new JSP file under WebContent folder. Create folders 'JS' and 'CSS' under web content and add the following files from the Footable download to these folders.

JS - footable-0.1.js
CSS - footable-0.1.css
CSS - 'img' folder from footable download

4. Copy and paste below code in the newly created JSP page.


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.PreparedStatement"  %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%!
public int nullIntconv(String str)
{   
    int conv=0;
    if(str==null)
    {
        str="0";
    }
    else if((str.trim()).equals("null"))
    {
        str="0";
    }
    else if(str.equals(""))
    {
        str="0";
    }
    try{
        conv=Integer.parseInt(str);
    }
    catch(Exception e)
    {
    }
    return conv;
}
%>
<%

    Connection conn = null;
    Class.forName("com.mysql.jdbc.Driver").newInstance();
    conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/databasename","username", "password");

    ResultSet rsFooTable = null;
    ResultSet rsRowCnt = null;
    
    PreparedStatement psFooTable=null;
    PreparedStatement psRowCnt=null;
    
    int iShowRows=10;  // Number of records show on per page
    int iTotalSearchRecords=5;  // Number of pages index shown
    
    int iTotalRows=nullIntconv(request.getParameter("iTotalRows"));
    int iTotalPages=nullIntconv(request.getParameter("iTotalPages"));
    int iPageNo=nullIntconv(request.getParameter("iPageNo"));
    int cPageNo=nullIntconv(request.getParameter("cPageNo"));
    
    int iStartResultNo=0;
    int iEndResultNo=0;
    
    if(iPageNo==0)
    {
        iPageNo=0;
    }
    else{
        iPageNo=Math.abs((iPageNo-1)*iShowRows);
    }
    

    
    String sqlPagination="SELECT SQL_CALC_FOUND_ROWS * FROM country limit "+iPageNo+","+iShowRows+"";

    psFooTable=conn.prepareStatement(sqlPagination);
    rsFooTable=psFooTable.executeQuery();
    
    //// this will count total number of rows
     String sqlRowCnt="SELECT FOUND_ROWS() as cnt";
     psRowCnt=conn.prepareStatement(sqlRowCnt);
     rsRowCnt=psRowCnt.executeQuery();
     
     if(rsRowCnt.next())
      {
         iTotalRows=rsRowCnt.getInt("cnt");
      }
%>
<html>
<head>
<title>Responsive Table in Java Web Application with Footable.js</title>
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
<link href="css/footable-0.1.css" rel="stylesheet" type="text/css"/>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/footable-0.1.js" type="text/javascript"></script>
<script src="js/footable.filter.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
 $('.footable').footable();
});
</script>
</head>
<body>
<h1>Responsive Table in JSP with Footable.js</h1>
<form name="frm">
<input type="hidden" name="iPageNo" value="<%=iPageNo%>">
<input type="hidden" name="cPageNo" value="<%=cPageNo%>">
<input type="hidden" name="iShowRows" value="<%=iShowRows%>">
<table width="100%" class="footable">

<thead>
                  <tr>
                      <th data-class="expand"><u>Code</u></th>
                      <th><u>Name</u></th>
                      <th data-hide="phone"><u>Local Name</u></th>
                      <th data-hide="phone,tablet"><u>Continent</u></th>
                      <th data-hide="phone,tablet"><u>Region</u></th>
                      <th data-hide="phone,tablet"><u>Population</u></th>
                      <th><u>Capital</u></th>
                      <th data-hide="phone,tablet"><u>Year of Independence</u></th>
                      <th data-hide="phone,tablet"><u>Head of State</u></th>
                  </tr>
              </thead>
              <tbody>
<%
  while(rsFooTable.next())
  {
  %>
    <tr>
      <td><%=rsFooTable.getString("code")%></td>
      <td><%=rsFooTable.getString("name")%></td>
      <td><%=rsFooTable.getString("localname")%></td>
       <td><%=rsFooTable.getString("continent")%></td>
       <td><%=rsFooTable.getString("region")%></td>
        <td><%=rsFooTable.getString("population")%></td>
        <td><%=rsFooTable.getString("capital")%></td>
         <td><%=rsFooTable.getString("indepyear")%></td>
         <td><%=rsFooTable.getString("headofstate")%></td>
        
          
    </tr>
    <% 
 }
 %>
 </tbody>
<%
  //// calculate next record start record  and end record 
        try{
            if(iTotalRows<(iPageNo+iShowRows))
            {
                iEndResultNo=iTotalRows;
            }
            else
            {
                iEndResultNo=(iPageNo+iShowRows);
            }
           
            iStartResultNo=(iPageNo+1);
            iTotalPages=((int)(Math.ceil((double)iTotalRows/iShowRows)));
        
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }

%>
</table>
<br/>
<table border="1">
<tr>
<td colspan="3">
<div>
<%
        //// index of pages 
        
        int i=0;
        int cPage=0;
        if(iTotalRows!=0)
        {
        cPage=((int)(Math.ceil((double)iEndResultNo/(iTotalSearchRecords*iShowRows))));
        
        int prePageNo=(cPage*iTotalSearchRecords)-((iTotalSearchRecords-1)+iTotalSearchRecords);
        if((cPage*iTotalSearchRecords)-(iTotalSearchRecords)>0)
        {
         %>
          <a href="index.jsp?iPageNo=<%=prePageNo%>&cPageNo=<%=prePageNo%>"> << Previous</a>
         <%
        }
        
        for(i=((cPage*iTotalSearchRecords)-(iTotalSearchRecords-1));i<=(cPage*iTotalSearchRecords);i++)
        {
          if(i==((iPageNo/iShowRows)+1))
          {
          %>
           <a href="index.jsp?iPageNo=<%=i%>" style="cursor:pointer;color: red"><b><%=i%></b></a>
          <%
          }
          else if(i<=iTotalPages)
          {
          %>
           <a href="index.jsp?iPageNo=<%=i%>"><%=i%></a>
          <% 
          }
        }
        if(iTotalPages>iTotalSearchRecords && i<iTotalPages)
        {
         %>
         <a href="index.jsp?iPageNo=<%=i%>&cPageNo=<%=i%>"> >> Next</a> 
         <%
        }
        }
      %>
<b>Rows <%=iStartResultNo%> - <%=iEndResultNo%>   Total Result  <%=iTotalRows%> </b>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
<%
    try{
         if(psFooTable!=null){
          psFooTable.close();
         }
         if(rsFooTable!=null){
          rsFooTable.close();
         }
         
         if(psRowCnt!=null){
             psRowCnt.close();
         }
         if(rsRowCnt!=null){
             rsRowCnt.close();
         }
         
         if(conn!=null){
          conn.close();
         }
    }
    catch(Exception e)
    {
        e.printStackTrace();
    }
%>

Change database name, username, password in the connection string and table name in the query to match your database.

Note that in the table under thead I have specified which columns to hide initially for phone and tablet views using the data attribute, 'data-hide'. This is one good feature of FooTable that they have made it very intuitive and easy for the developers to implement it  with simple data attributes when compared with the other table plugins like DataTable.

The table is made responsive by adding single line of jQuery,


$(table).footable();

6. That's it we are good to run the jsp file in a server now. I use Tomcat Web server to launch the jsp file. See below screenshots for how table is rendered in different screens,








Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!


Subscribe to GET LATEST ARTICLES!


advertise here

Related

Java 6167518248619097003

Post a Comment

emo-but-icon

Currency Converter

Built using AngularJS and ASP.NET Web API

SPONSORED

SUBSCRIBE


item