Technical Articles relating to Oracle Development Tools and Frameworks

  • JET
    November 17, 2017

Paging Controls in Oracle JET - Detecting Changes

Duncan Mills

A fairly common question I get asked about JET UIs is how to somehow monitor paging events in components such as the table or filmstrip. For example, the filmstrip with a paging control:

Or the table:

The main problem is that developers tend to look at the actual control itself e.g. the Table or the filmstrip expecting to find an event that they can listen to to detect that, for example, the current page has changed, or the total number of pages has changed (or instance as the screen is resized). There are no such events on the UI components and so it seems that it's a dead end. 

Well no, actually it's just a matter of looking a little deeper, and once you understand what's going on you'll see that JET actually manages this task in a simple and elegant way. 

The trick is to understand that these paging components all share a common mechanism and model for handling paged data.  This is the PageModel Interface. Each component such as <oj-film-strip> exposes a method which will give you access to this underlying model and then you can take advantage of it.  This will allow you to both monitor changes in the paging and also programatically control it (for instance if you want to use your own UI to switch pages rather than the one created by the components) . 

The PagingModel exposes a small number of key APIs for getting and setting the current page, as well as various bits of control information such as the number of items under paging control.  The really useful bit though is that the PagingModel is an event source and you can register functions to be called when something interesting (such as a change in the total page count) happens.  Specifically, the following events are supported:

  • BEFOREPAGE - called just as you are about to navigate between pages of items, allowing you to veto the change if you need to
  • PAGE - called to notify you that the page has actually changed
  • PAGECOUNT - called to notify you that the total number of pages has changed.  This might be due to the number of items being managed changing, or it could be that the window has been resized and the component has had to recalculate the page count based on how many items can be displayed at once. 

Each of these event callbacks will contain a payload with the information you will need about the event in question (see the doc). 

Registering a PagingModel Listener 

It only needs a few of lines of code to register one of these listeners - let's use the PAGE event listener as an example:

Step1 - Get the Paging Model 

Obtaining the PagingModel in the first place varies based on the component.  For example, <oj-film-strip>, which used an implicitly created PageModel, exposes a getPagingModel() API.

JET 3 (JQuery Syntax)

var pagingmodel  = $('#filmStrip').ojFilmStrip('getPagingModel');

JET 4 (HTMLElement Syntax)

var pagingmodel  = getElementById('filmStrip').getPagingModel();

On the other hand a paging <oj-table> and similar paging collection driven components such as <oj-list-view> and of course <oj-paging-control> expose the PagingModel via their datasources. If you don't already have the paging datasource reference, then of course you can ask for it via the data property:

JET 3 (JQuery Syntax)

var pagingmodel  = $('#table').ojTable('data');

JET 4 (HTMLElement Syntax)

var pagingmodel  = getElementById('table').data;

Step 2 - Register The Listener

Once we have the implementation of the PagingModel then you can use the on() function to register a callback to handle the relevant events.   The event names themselves are defined as constants in the oj.PagingModel object if you are not already requiring a paging data source in your define() block then you will need to add to add 'ojs/ojpagingcontrol' to make this available.

Then it's just a matter of registering a function and doing something interesting:

                 var newPage = event.page;
                 var oldPage = event.previousPage;
                 console.log('Switched to page ' + newPage ' from  ' + oldPage);

So there you have it - the correct way to monitor and interact with paging controls in JET.  To see this in action, you can head over to the Displaying Paging Information Demo in the cookbook.


Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.