DataViewsJS supports pagination of local as well as server side data. Pagination helps limit the amount of data displayed on each page.

To enable pagination, add a reference to the gc.dataviews.core.min.js file.

The following pagination options are available:

Property	Type	Default Value	Description
pageSize	number	20	Indicates the number of rows displayed on each page.
startPageIndex	number	1	Indicates the start page. Default value is set to 1.
maxPages	number	null	Indicates the total number of pages. If maxPages is not defined, pagination calculates the max Pages using data length and page size. If the amount of data exceeds the maxPagespageSize value, only a part of the data is displayed. If the amount of data is less tha maxPagespageSize value, blank pages are displayed.

Note: Adding a reference to the core.min.js file does not provide a user interface, such as next, previous navigation buttons. Users can create their own interface using the pageController on dataView.data.

Method	Description
next	Go to the next page using the pageController.next() method.
previous	Go to the previous page using the pageController.previous() method.
first	Go to the first page using the pageController.first() method.
last	Go to the last page using the pageController.last() method.
goToPage	Go to the specified index using the pageController.goToPage(index) method.
reload	Reload the current page using the pageController.reload(force) method. If force is set to true , pageController reloads the page from the server. Otherwise, page gets reloads from the cache memory if available.
getStatus	Get the current status of paging using the pageController.getStatus() method. It returns an Object with the following properties: pageIndex: Current page index. pageSize: Number of rows in a page. maxPages: Maximum number of pages. maxItems: Maximum number of rows.

Sample Code

1. Add a reference to the DataViewsJS files.

<link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/pageui.css" />
<link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/gc.dataviews.core.min.css" />
<script src="[Your Script Path]/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="[Your Script Path]/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="[Your Script Path]/pageui.js" type="text/javascript"></script>

2. Add a column definition. After adding the definition, initialize the code by calling the Grid ID followed by the function definition.

var dataView;
$(document).ready(function () {
  dataView = new GC.DataViews.DataView(
    document.getElementById('grid1'),
    dataSource,
    columns,
    new GC.DataViews.GridLayout({
      colWidth: 80,
      rowHeight: 36,
      startPageIndex: 2,
      pageSize: 12,
    })
  );

  var pageController = dataView.data.pageController;
  var pager = new PageUI('#page-nav', pageController.getStatus());

  pager.goToFirstEvent.addHandler(function () {
    pageController.first();
  });

  pager.goToPreviousEvent.addHandler(function () {
    pageController.previous();
  });

  pager.goToNextEvent.addHandler(function () {
    pageController.next();
  });

  pager.goToLastEvent.addHandler(function () {
    pageController.last();
  });

  pager.goToPageEvent.addHandler(function (e) {
    pageController.goToPage(e.newPage);
  });

  pageController.statusChanged.addHandler(function (sender, newStatus) {
    pager.updateStatus(newStatus);
  });
});

Pagination with Remote Data

Pagination can also be implemented using the server side data. For server side pagination, data source must provide loadRange methods. This method is called by the pageController of the DataViewsJS when page index changes.

Sample Code

1. Define the loadRange method within the dataSource variable.

var dataSource = {
  loadRange: function (params) {
    $.ajax({
      url: getUrl(params.pageSize * params.pageIndex, params.pageSize),
      crossDomain: true,
      success: function (result) {
        var itemsTotalCount = result.m_Item1;
        var currentPageDataSource = result.m_Item2;
        params.success(currentPageDataSource, itemsTotalCount);
      },
      error: function (xhr, status) {
        params.failed();
        if (status !== 'abort') {
          alert('Failed to load data from remote web site.');
        }
      },
    });
  },
};

2. Initialize the code by calling Grid ID followed by the function definition.

$(document).ready(function () {
  dataView = new GC.DataViews.DataView(
    document.getElementById('grid1'),
    dataSource,
    columns,
    new GC.DataViews.GridLayout({
      colWidth: 80,
      rowHeight: 36,
      pageSize: 12,
    })
  );

  var pageController = dataView.data.pageController;
  var pager = new PageUI('#page-nav', pageController.getStatus());

  pager.goToFirstEvent.addHandler(function () {
    pageController.first();
  });

  pager.goToPreviousEvent.addHandler(function () {
    pageController.previous();
  });

  pager.goToNextEvent.addHandler(function () {
    pageController.next();
  });

  pager.goToLastEvent.addHandler(function () {
    pageController.last();
  });

  pager.goToPageEvent.addHandler(function (e) {
    pageController.goToPage(e.newPage);
  });

  pageController.statusChanged.addHandler(function (sender, newStatus) {
    pager.updateStatus(newStatus);
  });
  //focus data.view by default
  document.querySelector('#grid1').focus();
});

function makeUrl(start, count) {
  return ''.concat(process.env.SITE_ROOT, '/remotedata/api/records?start=').concat(start, '&count=').concat(count);
}

See also

• pageController
• startPageIndex
• pageSize