Javascript Fixed Header in A table

Ads

 
 

Share on Google+Share on Google+

debasis
Javascript Fixed Header in A table
2 Answer(s)      7 years 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
Ads
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

Ads









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... 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
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... type="text/javascript" src="sort.js"></SCRIPT> <TABLE WIDTH="55
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 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 size tables
Fixed size tables  Can anyone help me in creating a fixed size table in mysql database
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
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
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
header files
header files   do you have a all header files of java
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
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
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????
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   
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
swings header
. i need logic for this program . i want to apply this to window header part
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
panelGrid header
/tomahawkpanelGridtag.shtml I have question how we can generate data table in the following
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
php header syntax
php header syntax  What is the correct syntax of PHP Header
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

Ads

 
Advertisement null

Ads