Implementing Infinite Scrolling

  <!--
    This is the initial table.  As with other examples, this table would normally be generated with the same
    template logic defined in the rowsTemplate() below, but is inlined here to make the example more clear.

    The last row in the table includes an ic-append-from directive to append more rows when the 'scrolled-into-view'
    event is fired.  It targets the <tbody> of the table, so the rows are appended to the table, and uses an indicator
    to show that more rows are loading.
    -->

  <table class="table">
    <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>ID #</th>
    </tr>
    </thead>
    <tbody id="contactTableBody">
    <tr>
      <td>Agent Smith</td><td>void0@null.org</td><td>D92B582CA8GDD94</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void1@null.org</td><td>4AEC9GF0F0A35G5</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void2@null.org</td><td>3G80BFBF490BBAF</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void3@null.org</td><td>A4CB29F6G6D812D</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void4@null.org</td><td>FDFEGE1580A78C0</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void5@null.org</td><td>96961373E447G6F</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void6@null.org</td><td>05EE57C9C2GD1B0</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void7@null.org</td><td>2G6BC043G9F12BD</td>
    </tr>
    <tr>
      <td>Agent Smith</td><td>void8@null.org</td><td>2G6BC043G9F12BD</td>
    </tr>
    <tr ic-append-from="/contacts/?page=2" ic-trigger-on="scrolled-into-view" ic-target="#contactTableBody" ic-indicator="#indicator">
      <td>Agent Smith</td><td>void9@null.org</td><td>3C8D2157F4B854F</td>
    </tr>
    </tbody>
  </table>

  <center> <!-- lol -->
    <i class="fa fa-spinner fa-spin fa-5x" id="indicator" style="display: none"></i>
  </center>

  <script>

    //========================================================================
    // Mock Server-Side HTTP End Point
    //========================================================================
    $.mockjax({
      url: /\/contacts.*/,
      responseTime: 800,
      response: function (settings) {
        var queryStr = settings.url.substring(settings.url.lastIndexOf('?'));
        var params = parseParams(queryStr);

        var page = parseInt(params['page']);
        var contacts = dataStore.contactsForPage(page)
        this.responseText = rowsTemplate(page, contacts);
      }
    });

    //========================================================================
    // Mock Server-Side Templates
    //========================================================================
    function rowsTemplate(page, contacts) {
      var txt = "";
      for (var i = 0; i < contacts.length; i++) {
        var c = contacts[i];
        txt += "<tr" + loadAttributes(page, i == contacts.length - 1)  + "> \
                  <td>" + c.name + "</td><td>" + c.email + "</td><td>" + c.id + "</td> \
                </tr>";
      }
      return txt;
    }

    function loadAttributes(page, lastRow) {
      if(lastRow) {
        return " ic-append-from='/contacts/?page=" + (page + 1) + "' ic-trigger-on='scrolled-into-view' \
                 ic-target='#contactTableBody' ic-indicator='#indicator'"
      } else {
        return ""
      }
    }

    //========================================================================
    // Mock Data Store
    //========================================================================
    var dataStore = function(){
      var contactId = 9;
      function generateContact() {
        contactId++;
        var idHash = "";
        var possible = "ABCDEFG0123456789";
        for( var i=0; i < 15; i++ ) idHash += possible.charAt(Math.floor(Math.random() * possible.length));
        return { name: "Agent Smith", email: "void" + contactId + "@null.org", id: idHash }
      }
      return {
        contactsForPage : function(page) {
          var vals = [];
          for( var i=0; i < 10; i++ ){
            vals.push(generateContact());
          }
          return vals;
        }
      }
    }()


  </script>