debasis
Javascript Fixed Header in A table
2 Answer(s)      4 years and 11 months ago
Posted in : Design concepts & design patterns
Dear Sir,
Thank you for your help.It is a great web site with a lot of help
Cheers & Thank You again.
My question is while querying some data and placing it in a table i have as many as 40 columns with many rows.when i am scrolling down data in the table the header gets lost.While analysing data one cant identify the coloumns to respective name.I want that header to be fixed,even after am scrolling 20000 data.But header with the name should be fixed and data to be scrolled down.my table header code is like this .you can use this or by giving single <td> to give coloumn name.


tblHeader = "<tr><th> Sl. No.</th><th>DTR No</th><th>Transformer Rating</th><th>Manufacturer Name</th>"+
"<th>Year of Manufacturer</th><th>Manufacturer Sl. No.</th><th>P.O. No.</th><th>Lot No</th></tr>";


<table class = "formfields" border = "1" align="center" cellpadding="2" style="border-collapse: collapse" bordercolor="#111111">
<%=tblHeader %>

After this how and what code should i give for a fixed header.Thank You

Regards
Debasis Mohapatra
Advertisement
View Answers

August 5, 2010 at 1:05 PM


Hi Friend,

You can do paging.

Try the following code:

<%@ page language="java" %>
<%@ page import="java.sql.*" %>
<%!
public int nullIntconvert(String str){
int num=0;
if(str==null) {
str="0";
}
else if((str.trim()).equals("null")) {
str="0";
}
else if(str.equals("")) {
str="0";
}
try{
num=Integer.parseInt(str);
}
catch(Exception e) { }
return num;
}
%>
<%
Connection conn = null;
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root";, "root");
ResultSet rs1 = null;
ResultSet rs2 = null;
PreparedStatement ps1=null;
PreparedStatement ps2=null;

int showRows=10;
int totalRecords=10;
int totalRows=nullIntconvert(request.getParameter("totalRows"));
int totalPages=nullIntconvert(request.getParameter("totalPages"));
int iPageNo=nullIntconvert(request.getParameter("iPageNo"));
int cPageNo=nullIntconvert(request.getParameter("cPageNo"));

int startResult=0;
int endResult=0;
if(iPageNo==0){
iPageNo=0;
}
else{
iPageNo=Math.abs((iPageNo-1)*showRows);
}
String query1="SELECT SQL_CALC_FOUND_ROWS * FROM student limit "+iPageNo+","+showRows+"";
ps1=conn.prepareStatement(query1);
rs1=ps1.executeQuery();
String query2="SELECT FOUND_ROWS() as cnt";
ps2=conn.prepareStatement(query2);
rs2=ps2.executeQuery();
if(rs2.next()) {
totalRows=rs2.getInt("cnt");
System.out.println(totalRows);
}
%>
<html>
<h3>Pagination of JSP page</h3>
<body>
<form>
<input type="hidden" name="iPageNo" value="<%=iPageNo%>">
<input type="hidden" name="cPageNo" value="<%=cPageNo%>">
<input type="hidden" name="showRows" value="<%=showRows%>">
<table width="100%" cellpadding="0" cellspacing="0" border="1" >
<tr>
<td>Roll No</td>
<td>Name</td>
<td>Marks</td>
<td>Grade</td>
</tr>
<%
while(rs1.next()){
%>
<tr>
<td><%=rs1.getInt("rollNo")%></td>
<td><%=rs1.getString("name")%></td>
<td><%=rs1.getInt("marks")%></td>
<td><%=rs1.getString("grade")%></td>
</tr>
<%
}
%>
<%
try{
if(totalRows<(iPageNo+showRows)) {
endResult=totalRows;
}
else{
endResult=(iPageNo+showRows);
}
startResult=(iPageNo+1);
totalPages=((int)(Math.ceil((double)totalRows/showRows)));
}
catch(Exception e){
e.printStackTrace();
}
%>
<tr>
<td colspan="3">
<div>


August 5, 2010 at 1:05 PM


continue...

<%
int i=0;
int cPage=0;
if(totalRows!=0) {
cPage=((int)(Math.ceil((double)endResult/(totalRecords*showRows))));
int prePageNo=(cPage*totalRecords)-((totalRecords-1)+totalRecords);
if((cPage*totalRecords)-(totalRecords)>0){
%>
<a href="pagination.jsp?iPageNo=<%=prePageNo%>&cPageNo=<%=prePageNo%>"> << Previous</a>
<%
}
for(i=((cPage*totalRecords)-(totalRecords-1));i<=(cPage*totalRecords);i++){
if(i==((iPageNo/showRows)+1)){%>
<a href="pagination.jsp?iPageNo=<%=i%>" style="cursor:pointer;color: red"><b><%=i%></b></a>
<%
}
else if(i<=totalPages){
%>
<a href="pagination.jsp?iPageNo=<%=i%>"><%=i%></a>
<%
}
}
if(totalPages>totalRecords && i<totalPages){
%>
<a href="pagination.jsp?iPageNo=<%=i%>&cPageNo=<%=i%>"> >> Next</a>
<%
}
}
%>
<b>Rows <%=startResult%>-<%=endResult%>Total Rows<%=totalRows%> </b>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
<%
try{
if(ps1!=null){
ps1.close();
}
if(rs1!=null){
rs1.close();
}

if(ps2!=null){
ps2.close();
}
if(rs2!=null){
rs2.close();
}
if(conn!=null){
conn.close();
}
}
catch(Exception e)
{
e.printStackTrace();
}
%>

The above jsp page is named as 'pagination.jsp'.

It will be helpful for you.
Thanks









Related Tutorials/Questions & Answers:
Javascript Fixed Header in A table - Design concepts & design patterns
Javascript Fixed Header in A table  Dear Sir, Thank you for your... name.I want that header to be fixed,even after am scrolling 20000 data.But header with the name should be fixed and data to be scrolled down.my table header
Fixed Header - Design concepts & design patterns
scrolling down data in the table the header gets lost.While analysing data one cant identify the coloumns to respective name.I want that header to be fixed,even after am scrolling 20000 data.But header with the name should be fixed and data
Advertisements
table header
table header  how set the header to the TableModel
JavaScript createTHead method
;    In JavaScript we can create and add table header... header.    document.getElementById('table') .createTHead(); We can also add some style and color to this table header. Here is the full
HTML Table in javascript
HTML Table in javascript  hi all, how to add last row with sum in table using javascript
Fixed size tables
Fixed size tables  Can anyone help me in creating a fixed size table in mysql database
JavaScript deleteTHead method
page with the use of JavaScript method similarly we can delete and create Table header with the use of JavaScript method deleteTHead() of the table object. In this example of JavaScript methods we have deleted the table header by getting
JavaScript createTFoot method
JavaScript createTFoot method       We can add header and footer also to the table by using...; <thead> <th colspan="2"> Information table Header <
JavaScript sort table
JavaScript sort table..., we are going to sort the table using the JavaScript. To sort the table, we... type="text/javascript" src="sort.js"></SCRIPT> <TABLE WIDTH="55
JavaScript Show Hide table
JavaScript Show Hide table... the JavaScript. In the given example, we have created a table. The method...='javascript:hideTable();' value='hide'> <table id='table' border=1>
JavaScript Hide Table Rows
JavaScript Hide Table Rows...; In this section, you will learn how to hide table rows using JavaScript... Table Row</h2> <script language="javascript"> var hide
JavaScript Hide Table Column
JavaScript Hide Table Column...; In this section, we are going to hide a table column using JavaScript. In the given example, we have created a table consisting of four columns. Here we
Fixed Values
Fixed Values If you want to supply any fixed value to the element then "... automatically but is fixed and can not be changed. Whenever the element is used in the document it has its fixed value and user can not provide any other
JavaScript add row dynamically to table
JavaScript add row dynamically to table  ... to the table by adding a pair of  <TR></TR> tags. If we want to add row to a table dynamically then we can also do this with the JavaScript code
JavaScript add row to table
JavaScript add row to table      ... table using JavaScript. You can see in the given example, we have created a table...="javascript:addRow('table')">Add row</button> </html>
Html form using JavaScript to display the table content
Html form using JavaScript to display the table content  HI There, Greetings, I am new to this java and I need your assistance. I have created... want to write a Html JavaScript coding to display the content from database
No Max-height Fixed
No Max-height Fixed      ... of a Textarea with minimum fixed height but no max height fixed. Steps to develop the Auto generate of a Textarea  with minimum fixed height but no max height fixed
Simple Fixed Size Queues
Simple Fixed Size Queues  Data Structures Lab Lab 4 Simple Fixed Size Queues Build both a Pipeline and a Circular Queue structure of fixed length size of 10 slots.  Data Structure and methods for Queue
Simple Fixed Size Queues
Simple Fixed Size Queues  Data???? Structures Lab Simple???? Fixed???? Size???? Queues Build???? both???? a???? Pipeline???? and???? a???? Circular???? Queue???? structure????
header files
header files   do you have a all header files of java
header() in php
header() in php  hello, Use of header() in php?   hello, header() is used for redirect the page.if you want to redirect one page to another we can use
Header file
Header file  when we use, Scanner input=new Scanner(System.in); this statement in a java program,which header filemust be imported to the program?   Hi Friend, Import the package java.util.*; Thanks
table?
table?  Hi, how could i make a table in javascript, which would look... ... Where first two columns are fixed, and last two need mathematical calculations? I can't figure out, how to construct a table,with two fixed columns, one that reads
swings header
. i need logic for this program . i want to apply this to window header part
panelGrid header
/tomahawkpanelGridtag.shtml I have question how we can generate data table in the following
With Fixed Max-Height
With Fixed Max-Height      ...; textarea  with fixed Max-Height. Steps to develop the Auto generate of a Textarea with fixed Max-Height. Step 1:       Create a new file
Fixed Value check using struts validator framework
Fixed Value check using struts validator framework  Hi All, can anyone tell me how to use struts validator framework for fixed value check. eg. country='India'; Thanks in advance
php header syntax
php header syntax  What is the correct syntax of PHP Header
http header content length
http header content length  How to check the request header content length in HTTP
alignment for header and footer
alignment for header and footer  header and footer alignment is not fit like footer is not fit in bottom some white space is there in jsf, what to do
JavaScript deleteTFoot method
then we can delete this table footer by calling the JavaScript method...="400"> <thead> <th colspan="2"> Information table Header <... JavaScript deleteTFoot method