I'm using version 2.8 of the YUI Paginator in concert with the DataTable. I've been given the requirement to render different sets of pagination navigation widgets in the DataTable footer and header.

The footer pagination needs to look something like this:



The header pagination needs to look something like this:




I got the footer pagination working in pretty short order using a template and by overriding the default SAM classes (i.e. yui-pg-last, yui-pg-first).

I don't know how to tackle the header pagination since multiple templates are not supported by the API. I somehow have to figure out how to make the Paginator.ui.PreviousPageLink and Paginator.ui.NextPageLink render differently depending on the container (header vs footer). As you can see from the screenshots, the Previous/Next page links in the footer don't use an image, but those links need to be rendered using an image in the header.

The API documentation/examples didn't show an obvious way of achieving what I need. The closest I found was this example http://developer.yahoo.com/yui/examples/paginator/pag_manual_render.html in which the render event of the paginator is used to place different pagination widgets into different containers. But I don't see how to manually override the way the Previous/Next links are rendered depending on the container.

I appreciate any help you guys can provide!

Thanks for the quick response. In general, how would one override a protected method such as _renderTemplate?

private and protected members are just a naming convention: they start with an underscore. javaScript knows nothing about them, they are regular methods and can be overridden just line any other.

Satyam,

This helps tremendously. As you can tell, I'm still trying to wrap my head around OO constructs in javascript.

Thanks