Spread.Views 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.spread.views.paging.10.40.20162.0.min.js file.

The following pagination options are available:

Note: Adding a reference to the paging.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.

Sample Code

1. Add a reference to the gc.spread.views.paging.10.40.20162.0.min.js file to use the pagination plugin.

   <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">
   <script src="[Your Script Path]/gc.spread.views.paging.10.40.20162.0.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.Spread.Views.DataView(document.getElementById('grid1'), dataSource, columns,
                     new GC.Spread.Views.Plugins.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 Spread.Views 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.Spread.Views.DataView(document.getElementById('grid1'), dataSource, columns, new GC.Spread.Views.Plugins.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 getUrl(start, count) {
               return '//spread.cloudapp.net:8081/api/Records?start=' + start + '&count=' + count;
       }

See Also

pageController
startPageIndex
pageSize