OneSimpleTablePaging 2.0: Now with Floating Table Header!

It has been more than two years since I first published OneSimpleTablePaging, a simple JavaScript library which does HTML table paging on web pages. The purpose of working on this project is to provide an alternative by just doing all the table pagination in one JavaScript file without using any image.

Floating Table Header <thead>

I blogged about this two years ago. Since then, I have been receiving feedback from readers on how to make the library do more.

OneSimpleTablePaging.JS Demo Site

OneSimpleTablePaging.JS Demo Site at

One of the suggestions from trdunsworth is to implement a floating table header. This will help the header of the table to be fixed at the original position when readers scrolling the web page up and down. I like this idea very much.

Fortunately, there are many resources available online which shows how a floating table header can be done easily. A very simple solution that I first found is suggested by Andrew Whitaker on StackOverflow. He even nicely provided a demo on JSFiddle. However, his solution is too simple. It does not take into the consideration of, for example, hiding the floating header if the table has been scrolled too way up and is no longer visible. Another solution on CodePen thus gave me some ideas on how to improve the code further.

After spending one afternoon, I successfully implemented the feature and published a new version of OneSimpleTablePaging. I also did a simple demo page to show how the pagingnation and floating header work:

From Google Code to GitHub

I have been using Google Code since the time when I was studying in university. Recently, with the increasing popularity of GitHub, I decided to try it out. Hence, I have moved the project OneSimpleTablePaging to GitHub:

Yup, so now please visit the new homepage for OneSimpleTablePaging at GitHub! Thanks. =)

OneSimpleTablePaging is now on GitHub!

OneSimpleTablePaging is now on GitHub:!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s