Paginator/ListView demo: Server-side List

The code

HTML part:

<h4>Countries list</h4>
<p>Number of countries: <span id="countriesCount"></span></p>
<div id="pageIndicator"></div>
<div id="itemsList2"></div>
<div id="itemsList2Paginator"></div>

Javascript part:

<script type="text/javascript">
  var _maxItems = 5;
  var _maxPages = 7;
  var _reqFilters = [0, 0];
  var _reqSortCriterium = 0;
  var _skipCount = 0;
  // Execute on page load
  $(function () {
    // Initialize paginator plugin
    $('#itemsList2Paginator').paginator({
      itemsPerPage: _maxItems,
      maxPagesShown: _maxPages,
      onPageRequest: function (el, pageIdx) {
        // Tell 'itemslist' plugin to load page items
        $('#itemsList2').itemslist('getItems', { skipCount: pageIdx * _maxItems, initPaginator: false });
      }
    });
    // Initialize itemslist plugin
    $('#itemsList2').itemslist({
      listUrl: '/umbraco/surface/Demos/GetCountryRatingsList',
      reqFilters: _reqFilters,
      reqSortCriterium: _reqSortCriterium,
      displNrOfItemsElement: '#displNrOfItems',
      useHistory: false,
      onBeginLoadItems: function () {
        $.blockUI({ message: 'Busy loading...' });
      },
      onEndLoadItems: function (isError, listParms, responseText) {
        $.unblockUI();
        if (isError) {
          $('#itemsList2').html("<div class='block'><p class='error'>A fault occurred while loading the country ratings list</p></div>" + responseText);
        }
        else {
          var maxPage = (listParms.totalItemsCount != 0) ? Math.floor((listParms.totalItemsCount - 1) / listParms.maxItems) + 1 : 0;
          $('#countriesCount').text(listParms.totalItemsCount);
          $('#pageIndicator').text((listParms.skipCount / listParms.maxItems + 1) + '/' + maxPage);
        }
      },
      usePaginator: true,
      maxItems: _maxItems,
      reqSkipCount: _skipCount,
      totalNrOfItemsElement: '#totalNrOfItems',
      onInitPaginator: function (itemsCount, activePageIdx) {
        $('#itemsList2Paginator').paginator('reInit', { itemsCount: itemsCount, activePageIdx: activePageIdx });
      }
    });
  });
</script>

This example uses the paginator plugin together with the service.itemslist.jquery plugin. That plugin is responsible for obtaining the paged list items from the server using AJAX and putting them in the DOM. As you can see there is actually not a lot of difference between the paginator initialization code here and the one that is used in the client-side version. The only change is the omission of the itemsCount and activePageIdx parameters. They are not needed here because the paginator will get them later through a (re-)initialization call that is triggered right after the first page of items is retrieved and injected in the DOM by the itemslist plugin. With each AJAX call to the server the itemslist plugin expects that the server returns HTML formatted content that it can inject into the DOM just as it is. The content is also assumed to have 2 hidden fields: one that holds the overall size of the list, the other holding the number of displayed (i.e. 'returned') items.