Prototype Pagination

The idea behind pagination is the segmenting of a large result set into smaller more managable sections to be consumed.

The Core of Pagination, a Data Transfer Object

In my approach towards Pagination I like many others got overwhelmed with the ideas of how to build an interface component that not only manages segments of the data set but also allows an interface to traverse. This is a bad approach, the first step towards easy pagination is to create an object which will segment a large array into an array of arrays, a matrix. Once the matrix is created the interface to traverse it is much simpler.

Extend the DTO, Iteration

In the basic segmenting class there is no internal index so it must be managed outside of the class. This is a PIA for our iteration based UI control, the forward arrow requesting "Next" and the backward arrow request "Previous". So I integrated an internal index and public functions to assist in iteration, stuff like next() and hasNext(), you know, the good stuff. This helped out the UI Component class tremendously as it no longer needed to keep track of anything but the Pagination object and call specific functions.

Coming into View

Now that we have our data in an easy to use DTO encapsulation class we can begin the UI Components. When I say UI Components I am referencing a class that manages a DOM element. I have decoupled the entire control into two base controls. One that manages what I refer to as the control bar, this class is the main work horse as it handles the Pagination object and allows the user to iterate over the set. The other is the main view of the record set, this class listens to the control bar's "change" event. When it occurs it takes the set and renders it as HTML elements inside a given DOM Element. This way we can have decoupled the management of the sets from how they're rendered.

Terms Defined

• EventDispatcher a class to implement event style architecture
• PageController the UI Component class that is responsible for iteration, the control bar
• PageView UI Component responsible for record set rendering.
• Pagination the class that handles segmenting your data set.
• PaginationIteration a subclass of Pagination to ease development with an internal index and convienent iteration functions
• The Google Gadget Code Interested in the gadget but want your blog to show up? No problem, some very light refactoring is necessary, look for GadgetFeedService('http://positionabsolute.net/blog/feed/index.php') Change the path from my blog to yours, that simple.
• Google Gadget API For referencing module prefs and other functionality of a Google Gadget. Change any of the module prefs that you like but please keep me as the author of the gadget, other than that have fun.

The Code

The code that was used in this page is written below, just to show you how i implemented things and worked the instances together.

var myPage = new PaginationIteration({ perPage : 5 });

var myView = new PageView("feedView");
var myController = new PageController("pageControl", myPage);

var myService = new FeedService("/blog/feed/index.php");

myService.addEventListener("feed", myController.serviceHandle);

myController.addEventListener("change", myView.pageChangeHandle);

myService.retrieveFeed();
					
					

Comments