Javascript Fixed Header in A table

Javascript Fixed Header in A table

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
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
table header
table header  how set the header to the TableModel
Advertisements
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
JavaScript createTHead method
;    In JavaScript we can create and add table header... create table header.    document.getElementById('table') .createTHead(); We can also add some style and color to this table header. Here
HTML Table in javascript
HTML Table in javascript  hi all, how to add last row with sum in table using javascript
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 sort table
JavaScript sort table..., we are going to sort the table using the JavaScript. To sort the table, we...="table" cols="4"> <TR><TD><A href="javascript:sortTable(0
JavaScript createTFoot method
JavaScript createTFoot method       We can add header and footer also to the table by using...;> Information table Header </th> </thead> <tr>
JavaScript Show Hide table
JavaScript Show Hide table... the JavaScript. In the given example, we have created a table. The method...' onClick='javascript:hideTable();' value='hide'> <table id='table
JavaScript Hide Table Rows
JavaScript Hide Table Rows...; In this section, you will learn how to hide table rows using JavaScript...; <h2>Hide Table Row</h2> <script language="javascript">
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
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
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
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...;button onclick="javascript:addRow('table')">Add row</button>
Fixed size tables
Fixed size tables  Can anyone help me in creating a fixed size table in mysql database
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
javascript
javascript  javascript code to dynamically add table on button click.../javascript/javascriptexamples/javascript-add-row-dynamically.shtml http://www.roseindia.net/javascript/javascript-add-row-to-table.shtml http://www.roseindia.net
JavaScript deleteTFoot method
then we can delete this table footer by calling the JavaScript method... table with one header and one footer and we also have one button "Delete..."> Information table Header </th> </thead> <tr>
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,ADS_TO_REPLACE_1 header() is used for redirect the page.if you want to redirect one page to another we can use
Hi how to transfer table data from html page to excel sheet by using javascript .
Hi how to transfer table data from html page to excel sheet by using javascript .  html page to excel sheet by using javascript and i dont want to transfer all rows in table, i want to hide some rows in excel sheet. Please send
javascript - Design concepts & design patterns
for fixed header.Means,in a dispaly table in which am querying the results from database,header should be fixed,but data should be scrollable.e.g in a employee table name,designation,address header should be fixed and records should
ModuleNotFoundError: No module named 'fixed'
ModuleNotFoundError: No module named 'fixed'  Hi, My Python program is throwing following error: ModuleNotFoundError: No module named 'fixed' How to remove the ModuleNotFoundError: No module named 'fixed'
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.*;ADS_TO_REPLACE_1 Thanks
javaScript
javaScript  . Print a table like below in JAVASCRIPT 5 x 1 = 5 5 x 2 = 10 ΓΆβ?¬Β¦ΓΆβ?¬Β¦ΓΆβ?¬Β¦. 5 x 20 = 100
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
JavaScript  clone JavaScript
swings header
. i need logic for this program . i want to apply this to window header part
How to make a horizontally Scrollable grid in jsp using div, table, css, javascript?
How to make a horizontally Scrollable grid in jsp using div, table, css, javascript?  In a jsp page InsertUpdate.jsp (say) there is a button Insert... to display a record of 30 columns.Since the grid is made of table it becomes
No Max-height Fixed
No Max-height Fixed      ... of a Textarea with minimum fixed height but no max height fixed.ADS_TO_REPLACE_1 Steps to develop the Auto generate of a Textarea  with minimum fixed height
panelGrid header
/tomahawkpanelGridtag.shtml I have question how we can generate data table in the following
php header syntax
php header syntax  What is the correct syntax of PHP Header
Javascript
Javascript  How validations are done using javascript ,with example? and interview questions on javASCRIPT
How to use next and previous button(or href) for database table that is retrieved from MySQL DB using jsp,jstl,javascript
How to use next and previous button(or href) for database table... to display previous 10records. Database Query like this: Select * from table_name where id=..; database:mysql technology:jsp,servlet,javascript,jstl  
JavaScript
should use JavaScript? Thanks   Hi, JavaScript is scripting language that runs on browser. You have to embed JavaScript in HTML page. Please see JavaScript tutorial. Thanks
JavaScript
JavaScript  how to get full path of a file type in javascript
javascript
javascript  Hi deepak, how to write form validation on javascript
javascript
javascript  write a program to display implement about browsers using javascript
javaScript
javaScript  How to open a browser window that cannot be resized? (HTML + Javascript
javascript
javascript  i have just learned javascript... can you tell me what kind of applications can be made by javascript?? thank you
table
table  multiplicatyion table
javascript
javascript  how to set the request or session attribute in javascript head part of jsp page
javascript
javascript  Hi sir, This is sinduri, i want to learn javascript, so plz can u help me.how to learn
javascript
javascript  hi sir, if i want to learn javascript. what concepts i want to know
Javascript Querry
Javascript Querry  How to export the ms access header data to excel using java script
ModuleNotFoundError: No module named 'geoplotlib-fixed'
ModuleNotFoundError: No module named 'geoplotlib-fixed'  Hi, My... named 'geoplotlib-fixed' How to remove the ModuleNotFoundError: No module named 'geoplotlib-fixed' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'pyorient-fixed'
ModuleNotFoundError: No module named 'pyorient-fixed'  Hi, My... named 'pyorient-fixed' How to remove the ModuleNotFoundError: No module named 'pyorient-fixed' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'shippo-fixed'
ModuleNotFoundError: No module named 'shippo-fixed'  Hi, My Python... 'shippo-fixed' How to remove the ModuleNotFoundError: No module named 'shippo-fixed' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'shippo-fixed'
ModuleNotFoundError: No module named 'shippo-fixed'  Hi, My Python... 'shippo-fixed' How to remove the ModuleNotFoundError: No module named 'shippo-fixed' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'texttable-fixed'
ModuleNotFoundError: No module named 'texttable-fixed'  Hi, My... named 'texttable-fixed' How to remove the ModuleNotFoundError: No module named 'texttable-fixed' error? Thanks   Hi, In your python

Ads