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...
https://www.programming-free.com/2013/02/responsive-table-in-jsp-with-footablejs.html
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:
- It hides certain columns of data at different resolutions (we call these breakpoints).
- 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();
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,
The factor why there are so numerous web design denver colorado springing up, what these firms do not or cannot do is the most crucial point to do with an internet site as well as that is Search Engine Optimization, the trouble is that it takes a really long time to do it.
ReplyDelete