X

The Visual Builder Cloud Service Blog

Adding Paging Control to Tables in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

Paging control was a common pattern for controlling the number of records shown on a page and for fetching another set of records. Today, with the richer functionality provided by browsers, you can get a better user experience with native scroll functionality and a "load more" approach. I blogged about it in a previous entry that shows how scrolling/fetching/pagination works in VB tables by default. This "load more on scroll" approach is what you see in your Twitter and Facebook feeds for example. Google's search page seems to be one of the last remaining sites to stick with the "next 10 records" approach. At Oracle our UI experts also instructed our Cloud Apps development teams to not use paging controls. But, if you insist on adding a pagination control to your tables, here is a quick demo showing how to achieve this.  

Oracle JET has a pagination control that can be added to a table, see the example in their cookbook. The component relies on a PagingDataProviderView variable. This type is not one of the variable types that are "natively" available in VB, but you can easily create one in a JavaScript function and assign it to a variable of type Any. You simply pass to it an array of data and use the following code to create the variable. (Important note - make sure to use the correct field as the idAttribute for the record - something I forgot to do in the video - this is important for correctly returning the rowkey in record selection events).

define([ 'ojs/ojpagingdataproviderview', 'ojs/ojarraydataprovider'], function(PagingDataProviderView, ArrayDataProvider) {
  'use strict';

  var PageModule = function PageModule() {};

  PageModule.prototype.createPDP = function (deptArray) {
    return new PagingDataProviderView(new ArrayDataProvider(deptArray, { idAttribute: 'id' }));
  };

  return PageModule;
});

You call this function in an action chain passing to it the array of data returned from your REST call. Then you take the returned value from the function and assign it to the variable you created to hold the Paging Data Provider. Switch your table to be based on that variable and add the oj-paging-control tag to your table HTML code setting its data attribute to point to the same Paging Data Provider variable as well as the page-size you want to have.

  <oj-table scroll-policy="loadMoreOnScroll"
    class="oj-flex-item oj-sm-12 oj-md-12" data="[[$variables.myPDP]]"
    columns='[{"headerText":"id","field":"id"},{"headerText":"name","field":"name"},{"headerText":"salary","field":"salary"},{"headerText":"email","field":"email"}]'
    selection-mode.row="single"
    on-first-selected-row-changed="[[$listeners.ojTableFirstSelectedRow]]">
    <oj-paging-control data="[[ $variables.myPDP ]]" page-size="4"
      slot="bottom">
    </oj-paging-control>
  </oj-table> 

Here is the full development process:

One thing to note about the solution shown in the video, we are fetching all the records to the client layer when we call the REST service, and then the paging control takes care of limiting the number of rows rendered and scrolling through them. This might not be ideal if you have lots of records, take this into account when deciding on your pagination approach.

Join the discussion

Comments ( 3 )
  • Mohd Ahshan Danish Thursday, December 31, 2020
    We are getting data from Oracle Sales Cloud API and it has pagination parameter. is there way to use api pagination parameter and display like this.
  • Mohd Ahshan Danish Thursday, December 31, 2020
    if you can create video on below topic:

    on button click we are invoking REST API but it is taking time and we want to show busy indicator to make end user aware.
  • Shay Shmeltzer Thursday, January 7, 2021
    Mohd, The approach above is using ADP which fetches all the records to the client.
    If you want to fetch as needed you'll need to add events to the pagination component to invoke the REST call with the right parameters to fetch the next set etc. As mention in the blog if you just use a table the normal way the table will do this for you when you scroll the records.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.