Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
Often we are using tables to present specific kind of data on a web page. They help us to arrange and structure our information in nice and clean way so visitor can read and understand it. Tables are great choice when we want to present some statistics information, records or any other type of information. Using the possibility to modify the tables we can create as many rows and columns as we need, we can merge cells, align text and all other css style customization that are allowed in html elements. When we are presenting large amount of data and we are not using pagination we experience with long table that need to be scrolled down to view all records. What happens to me all the time is when I scroll over long table I forget the fields and I must scroll back to top to see again what field what information represents. So this is not user friendly at all and because of that I always add fixed table header when I create long tables so when scrolled down the first row that represents the fields scrolls also down with the screen.

jQuery Fixed Table Header

This is very nice simple script written by Mustafa that gives you option to create fixed header in top of a table and it is very easy for implementation. There are 3 options that you can define in this script:
  • HeaderRowSize - This option defines the number of fixed header rows. Default is 1 but you can set the number of rows that will be included in your fixed table header
  • HighlightRow - This option defines if table row will be highlighted onMouseOver. Default value is FALSE.
  • HighlightClass - This option defines the CSS class that is used when HighlightRow is set to TRUE.

Implementation

Step 1: Include jquery.min.js and jquery.fixedtableheader.min.js into HTML page like this:
 

Step 2: Insert also below lines into HTML page to point the table that will use this script.

Step 3: Finaly we create a table that will have class property set to 'exampleTable1'
..... 
Here is the script in action, below table has by default 1 fixed header row
Field 1
Field 2
Field 3
Field 4
Field 5
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Now let's make the table with 2 fixed header rows and add highlight onMouseOver effect. We will accomplish that with setting HeaderRowSize = 2 and HighlightRow = TRUE. Here is the full code:



Also above we add a style CSS definition on 'highlight' class that we use it in highlightClass option. Here is demonstration on 2 rows fixed table header and onMouseOver effect:
Field 1
Field 2
Field 3
Field 4
Field 5
SubField 1
SubField 2
SubField 3
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value
Field1_Value
Field2_Value
Field3_Value
Field4_Value
Field5_Value

Other Posts You Might Like

Get a fast, free website audit

Enter your URL below to get full in-depth SEO report and tips.

‚Äč

Useful Scripts

Most Popular Posts

Recent Posts

June 14th, 2014
Website Optimization Using Gzip Compression

June 10th, 2014
Google Search AutoComplete API

May 14th, 2014
What is a Tag Cloud and How to Calculate it by Formula

March 27th, 2014
Error writing file /tmp (errcode 28) Solved!

February 15th, 2014
Fixed CSS & HTML Navigation Bar

February 9th, 2014
Benchmark Your Server (CPU, File IO, MySQL) with SysBench

February 8th, 2014
JavaScript Array Basics

January 29th, 2014
JVZoo IPN API in PHP

January 25th, 2014
Payoneer Debit Card for Freelancers to receive money online

January 24th, 2014
How HTML Color Codes are generated?

Read Latest Posts directly on Facebook

Archive

X

Get a fast, free website audit

Enter your URL below to get full in-depth SEO report and tips.