Client side pager using Java script & jQuery

Recently i got a chance the build a client pager on my web page. Never knew it is very.

Below is my code for same

var currentPageNumber = 0; // 0 equals page 1
var pageSize = 10;

function buildPager(rowCount) {
    var myCustomClinetPager = $(‘#pagerRow’); // get the place where you want to render the pager it a span in my case
    rowCount = parseInt(rowCount / pageSize) + 1;
    myCustomClinetPager.html(”); // reset html of the span
    for (var iPager = 0; iPager < rowCount; iPager++) {
        if (currentPageNumber == iPager) {
            myCustomClinetPager.html(myCustomClinetPager.html() + “<input class=’disabled_page_button’ type=’button’ disabled=’disabled’ value='” + (iPager + 1) + “‘ />”);
        else {
            myCustomClinetPager.html(myCustomClinetPager.html() + “<input type=’button’ class=’class=’enabled_page_button” onclick=’folderTreeItemViewPager_PageIndexChanged(this);’ value='” + (iPager + 1) + “‘ />”);

You must call the above function once your data is rendered, in my case i am using ms ajax preview 6.0 and i cal this function on dataView rendered event.

Here is the logic to display the next page data, it uses a bit of jQuery too. In my case i am just hiding the data which i am not suppose to display. For example:- on page 1 i display all the records with my page size limit and i hide reset of the records.


folderTreeItemViewPager_PageIndexChanged(sender) {currentPageNumber = sender.value – 1;


“input .disabled_page_button”).each(function(index) {



this).attr(“class”, “enabled_page_button”);});

_folderTreeItemView.refresh();// this call is specific to ms ajax preview 6.0, you can ignore it and you can call you own fetch Next page data method.


finally here is my logic to hide a item conditionally on client side, it return true or false based on whether item is in current page range or not.

 function itemVisibility(index) {
    var start = 0;
    var end = 0;
    start = (currentPageNumber * pageSize);
    end = start + pageSize;
    //alert(start + ‘,’ + end);
    return index >= start && index < end;

That’s it guys. Please let me, if you see any difficulty in above.


Tarun Juneja


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