Forums

I've worked for a little bit towards developing a Paginator to work with DataTable (shout out to everybody on IRC who helped me!). The paginator is designed using YUI's Model and View infrastructure, where the Model keeps track of the housekeeping of the data for the paginator (i.e. # of pages, pages per row, item indices, etc...) and the View provides basic UI rendering and interactions with the paginator Model.

The cool thing about using a Model is that listeners can act on the 'pageChange' events of the model to, er ... change stuff! So although the original target of this was for DataTable, there may be other applications.

A demo of the generic Paginator (Model-View), without connection to anything (i.e. no datatable) is at pagview_demoLinked.html. This example includes something like 16 Paginator Views that are all linked to one shared Model (in this case). So any changes to the page in one View, cascade to all of the others. (Don't really know why one would do this ... but kinda fun to play with ).



The real meat-and-potatoes to this project was a DataTable Paginator. So I applied this Paginator View to a class extension of DataTable that I wrote that adds paging capability to DT (both client-side pagination AND server-side). The DT paginator works with sorting, scrolling and other types of features.

A link to a working demo of server-side pagination via ModelSync.REST is at dt_paginator_REST.html. I'm not link baiting, but there are a few more examples shown at the root of that site if you're interested. Also, it's very difficult to provide server data examples elsewhere other than on a dedicated site.

I may try to submit this for approval to the Gallery in the near future. I've seen a few paginators on the gallery, but didn't see a lot with UI's. Also, the future for an "official" Paginator, and especially one for DataTable seems unclear, so that's why I worked these up.

This is still early work, and I'm looking for any helpful advice people may have.

Thanks,

Todd

PS - Two modules have been added to YUI Gallery for pagination, one is the paginator-view and the other is the datatable-paginator

Thanks Satyam. I thought about "alphabetized" pagination and considered that was kind of an edge case use for a page-centric, bare-bones paginator. This paginator is based upon using an HTML data attribute (data-pglink="7") for page selector links where for a server requested data it calculates the startIndex and number of records to return / page in the request payload string. I considered the need for a basic DT paginator as paramount, thus why I focused on this approach.

Like many on here, I've done "alphabetized" filtering using a group of toggle buttons that on click send a response with the requested field name to the server. I could imagine a class extension of this paginator that could possibly wrap this capability in, but might take some tinkering.

Todd