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.

function

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

$(

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

$(

this).removeAttr(“disabled”);$(

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.

Cheers!

Tarun Juneja

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s