Posted by Manoj Garg on July 17, 2009
Pagination is a must have feature when it comes to display a list of item. List could be collection of search results, a tabular display of names etc etc. When the list is small, pagination is not something we should be worried about, But imagine having a list with 100’s of items to show then displaying all of them at once on a page is not a good idea.
Viewer of that page have to scroll down a lot if the list if too long
Page becomes slower since there are lots of DOM elements on the page
So developers tend to display a small number of items at once to the viewer and then proving him/her the option of navigating to different pages. There are two ways once can implement paging
Server side paging: Developer can get only a fixed number of records from the server and display then to the viewer and whenever viewer wants to navigate to a different page, a new request demanding the items from that particular page can be send to the server. In turn server can return records from that page only.
Client side paging: Depending on the scenario developer can also do the job of showing pages on the client side as well i.e. he/she may request all the items at once and then showing only a set of them to the viewer and providing user with the links to other pages using any scripting language.
I had a situation where it was not possible to have server side pagination due to restriction of the framework I was coding against. So I had no choice but to go with client side paging. I was implementing a search functionality where I would be searching against the lucene index to get the results and then showing those results to the viewer. search results will be displayed a html table. each row in the result table will be used to display one search result. Each search result will have some predefined fields and a summary for that results. Viewer will have an option to show and hide the summary of the result. So one requirement was to have different number of items per page depending on whether summary is visible to the viewer or not.
I took the following approach:
To start I created a JS class named “Pager” which will have all the methods related to the navigation among pages. Pager class had following members:
tableName : Name of the table on which pagination has to be applied.
itemsPerPage : Number of items to show when summary field is visible.
itemsWithoutSmry : Number of items to show when summary field is not visible to the viewer.
currentItemPerPage : Number of items currently visible. This value will be equal to either itemsPerPage or itemsWithoutSmry.
currentPage : current page in the table.
pages : Total number of pages in the table.
All the above field will be initialized to some default values when the Object of Pager call will be created.
Initialization of the pager
This method will initialize the pager object field pages by using the total records and items to shown on page. Following code snippet is the init() method.
Showing records of a particular page
To do this I will iterate through the rows of the table to show/hide the visibility of these rows depending on the page viewer has requested. Following code snippet shows the methods that do this.
Navigating to Next and Previous pages
Showing the pager bar
Adjusting the record count per page with the Summary visibility
I added a method to the pager class which takes a Boolean parameter denoting the visibility status of the summary content as input and based on this parameter it changes the current page size. Following code snippet shows the same:
Creating and using Instance of the Pager Class
following line shows the signature for the pager class
after the page object is created it must be first initialized, then the pager bar should be created followed by showing the page.
Following code snippet shows this
I will be uploading a demo soon.
If you have some better way to implement the pagination then please drop a comment. 🙂