jQuery - Enabling the Pager Buttons

Learning jQuery - Enabling the Pager Buttons

To make these new buttons actually work, we need to update the currentPage variable and then run our pagination routine. At first blush, it seems we should be able to do this by setting currentPage to page, which is the current value of the iterator that creates the buttons:

 

This mostly works. The new repaginate() function is called when the page loads and when any button is clicked. All of the buttons take us to a page with no rows on it, though:

The problem is that in defining our click handler, we have created a closure. The click handler refers to the page variable, which is defined outside the function. When the variable changes the next time through the loop, this affects the click handlers that we have already set up for the earlier buttons. The net effect is that, for a pager with 7 pages, each button directs us to page 8 (the final value of page). More information on how closures work can be found in Appendix C, JavaScript Closures.

To correct this problem, we'll take advantage of one of the more advanced features of jQuery's event binding methods. We can add a set of data to the handler when we bind it that will still be available when the handler is eventually called. With this capability in our bag of tricks, we can write:

 

Sponsored Links

 

page number is passed into the handler by way of the event's data property. In this way the page number escapes the closure, and is frozen in time at the value it contained when the handler was bound. Now our pager buttons can correctly take us to different pages: