In this article we will guide you about Repeater Paging using JavaScript. Actually, paging is something in which you rendered selected records on the page either from the database or the data table. But in some scenario we cannot afford the post back operation on every page change. So this article explains you how to do paging using JavaScript. Before we start it should be clear that this is not AJAX it is simple JavaScript which makes repeater control page able.

Implementation:

So here we go with our Repeater Control which can be bound using any data source but we are using LinqDatasource.



In header section we have created three divs one is for Page Index Display and another is to hold the paging liks and the last one is the container of all the records we will rendered in ItemTemplate.

In Item Template section we have created a div which hold the records and the important part to mention is the class “pageable” notice if we use any div in our ItemTemplate which has no class or any class other then “pageable” it will not be processed for paging by our JavaScript. 

And in the Footer section we are simple calling a function called managePaging. This function will set the whole paging stuff once the rendering of page able items is complete. That is why we have call this function in footer section.



As we can see we have taken some global variables which are in used by multiple functions for the purpose of page index and count settings.  Now read the following description of each function:

managePageIndex : This function is used to set the Page Index Display.
managePageNumbers: This function is used to get the total number of pages and display it accordingly.
managePaging : This is the key function, it will read all the divs inside the main div (remember we have created a container div to hold all the records) and  set the name attribute of inner div according to the page index and call the show page method with the current index.
showPage :  This function will hide all the divs except the who’s page index is  specified in the parameter.
moveNext and movePrevious : Both of these functions are off course use to move the page index to next and previous.

Conclusion:

In this article we learned how to perform the Repeater control paging using JavaScript.