Paginator demo: Client-side List

The code

HTML part:

<h4>Countries list</h4>
<div id="clientSideList1"></div>
<div id="clientSideListPaginator1"></div>

Javascript part:

<script type="text/javascript">
  var _countryRatings = [
    "AL,Albania,B1,STABLE,B1,STABLE,,",
    "AD,Andorra,A-,NEGATIVE,,,,",
    "AO,Angola,BB-,STABLE,Ba3,POSITIVE,BB-,POSITIVE",
    // etc...
    "ZW,Zambia,B+,STABLE,B1,STABLE,B+,NEGATIVE"
  ];
  var _maxItems = 10;
  var _maxPages = 5;
  function loadPageOfItems(skipCount, maxItems) {
    var data = "<ul>";
    while (skipCount < _countryRatings.length &&
           maxItems != 0) {
      var itemData = _countryRatings[skipCount].split(',');
      data += "<li><span>" + itemData[1] + "(" + itemData[0] + ")</span>, Rating: <span>" + itemData[2] + "</span></li>";
      maxItems--;
      skipCount++;
    }
    data += "</ul>";
    $('#clientSideList1').html(data);
  }
  // Execute on page load
  $(function () {
    // Initialize paginator plugin
    $('#clientSideListPaginator1').paginator({
      itemsPerPage: _maxItems,
      itemsCount: _countryRatings.length,
      activePageIdx: 0,
      maxPagesShown: _maxPages,
      onPageRequest: function (el, pageIdx) {
        // Show list items associated with pageIdx
        loadPageOfItems(pageIdx * _maxItems, _maxItems);
      }
    });
    // Show first page of list items
    loadPageOfItems(0, _maxItems);
  });
</script>

Usually when a paginated list is rendered client-side the complete list is stored on the webpage as a huge bulk of data, often encoded in JSON format. In this demo this is not the case; a simple array of strings is used where each string holds a list of comma-separated country/rating values. Upon page load the loadPageOfItems()javascript function is called to display the first page of items. The same method is called (through the paginator's onPageRequest callback) when someone presses/touches a paginator button or page. As you can see in the code, the rendering of each item of the list is taken care of through javascript. Javascript code generates the necessay HTML markup and injects it into the DOM. That (in my opinion) and the fact that the overall size of the web page can be huge, is the main disadvantage of this approach.