To prevent loading too much data into a web page, we split up the data into smaller sets called pages. Here's one way of stepping through those pages: the pseudo scrollbar.
A.E.Veltstra
2007-09-12
So you have 20,000 records in your database, each having 20 columns of data, and your client wants to access it like Excel. You try to make all the records appear in your web page in one go... and find out it's tediously slow. You need paging.
There are many ways to split the results of a database query into pages, depending on the used database and specific requirements. This article will avoid that topic. Instead, this article will show one method of presenting the paged information.
You already know paging, if you've ever used a web-based search engine (Yahoo, Excite, Google, InfoSeek, LiveSearch, to name a few). A search may result in thousands of hits, but you'll see only a page of 20 (for instance) at a time. The web page will then provide hyperlinks to other pages of hits. This article will do something similar... but I doubt you've ever seen this specific method before.
What do we see? It's a wide data sheet (shown in an iframe) with several columns and rows of data, plus a pseudo-scrollbar on the side. It isn't really a scrollbar, but for all intents and purposes, it functions as one. In actuality, its a bunch of hyperlinks inside an ordered list. The hyperlinks call up their own page in the data sheet. A bit of javascript will help us colour in the activated hyperlink, so we can see where on the scrollbar we are (just like a scroll button does on a regular scrollbar).
The data sheet loads separately in an iframe order to minimize loading and reaction time in its container page. Instead of using an iframe, the data can also be loaded using some javascript method like AJAX. In this example, meaningless sample data is generated. For your own use, point the scrollbar hyperlinks to a data loader that suits your needs.
There are many ways to split the results of a database query into pages, depending on the used database and specific requirements. This article will avoid that topic. Instead, this article will show one method of presenting the paged information.
You already know paging, if you've ever used a web-based search engine (Yahoo, Excite, Google, InfoSeek, LiveSearch, to name a few). A search may result in thousands of hits, but you'll see only a page of 20 (for instance) at a time. The web page will then provide hyperlinks to other pages of hits. This article will do something similar... but I doubt you've ever seen this specific method before.
What do we see? It's a wide data sheet (shown in an iframe) with several columns and rows of data, plus a pseudo-scrollbar on the side. It isn't really a scrollbar, but for all intents and purposes, it functions as one. In actuality, its a bunch of hyperlinks inside an ordered list. The hyperlinks call up their own page in the data sheet. A bit of javascript will help us colour in the activated hyperlink, so we can see where on the scrollbar we are (just like a scroll button does on a regular scrollbar).
The data sheet loads separately in an iframe order to minimize loading and reaction time in its container page. Instead of using an iframe, the data can also be loaded using some javascript method like AJAX. In this example, meaningless sample data is generated. For your own use, point the scrollbar hyperlinks to a data loader that suits your needs.
Need problem solving?
Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.