title: Pagination: using a "Get More" button with getJSON
body: <p>I am completely new to this, so please forgive me if I don't get enough information. I'm displaying potentially thousands of records using JSON and a listview, however I need to only show 20 at a time, with a "show more" button at the bottom. I'm not understanding how I would change my current javascript to allow for this, hopefully someone can point me in the right direction. I've been trying to apply this code to get it to work, but unsuccessfully:</p>
  
  <p><a href="http://jsfiddle.net/knuTW/2/" rel="nofollow">http://jsfiddle.net/knuTW/2/</a></p>
  
  <p>My current javascript to display the JSON data:</p>
  
  <pre><code>function getEmployeeList() {
  $.getJSON(serviceURL + 'getmeals.php?calfrom='+ var1 + '&amp;calto=' + var2, function(data) {
      $('#employeeList li').remove();
      employees = data.items;
      $.each(employees, function(index, employee) {
          $('#employeeList').append('&lt;li&gt;&lt;a href="employeedetails.html?id=' + employee.id + '"&gt;' +
              '&lt;img src="http://www.restaurants.com/assets/img/logos/' + employee.restaurant + '.jpg"/&gt;' +    
                  '&lt;h4&gt;' + employee.meal_item + '&lt;/h4&gt;' +
                  '&lt;p&gt;Calories: ' + employee.calories + '&lt;/p&gt;' +
                  '&lt;span class="ui-li-count"&gt;' + employee.protein + '&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
  
      });
      $('#employeeList').listview('refresh');
  });
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="employeeListPage" data-role="page" &gt;
  
  &lt;div data-role="header" data-position="fixed"&gt;
      &lt;h1&gt;Restaurant Meals&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div data-role="content"&gt;
       &lt;ul id="employeeList" data-role="listview" data-filter="true"&gt;&lt;/ul&gt;
       &lt;ul class="load-more"&gt;&lt;a href="#"&gt;Load More&lt;/a&gt;&lt;/ul&gt;
  &lt;/div&gt;      
  </code></pre>
  
  <p></p>