title: How to append more rows when scrolling to the Bottom with Javascript
body: <p>It's in <em>SharePoint</em> 2010, but I think It might run as it's normal.</p>
  
  <p><strong>1</strong>. The Item Limit per page is 30 as default. Thus, I have done with the list which showed 30 rows at the Page Load, then I have scrolled the mouse down to the Bottom and it hidden the last 10 rows.</p>
  
  <p><strong>Summary</strong>: Page loads 30 rows -> scroll down to the Bottom -> display 20 rows (hide the last 10-row).</p>
  
  <p>Sorry for this inconvenience but it requires me to have at least 10 reputation to post images or more than 2 links.</p>
  
  <p>Item Limit: [http://upanh.biz/images/2014/03/27/itemlimit.png]</p>
  
  <p>When scrolling down to the Bottom: <a href="http://upanh.biz/images/2014/03/27/bottom.png" rel="nofollow">http://upanh.biz/images/2014/03/27/bottom.png</a></p>
  
  <p>The list has changed: <a href="http://upanh.biz/images/2014/03/27/final.png" rel="nofollow">http://upanh.biz/images/2014/03/27/final.png</a></p>
  
  <p><strong>The problem</strong>: I do not know the way how to append 10 more rows when scrolling down to the Bottom of the page without re-loading this (the Item Limit can be modified to 100 items per page).</p>
  
  <p><strong>Summary</strong>: Page loads 30 rows -> scroll down to the Bottom -> display 40 rows</p>
  
  <p><strong>Javascript</strong> for <strong>1</strong>:</p>
  
  <pre><code>$(document).ready(function() {
  $('#WebPartWPQ1 table table').eq(0).attr("id", "myNewTable");
  $("#myNewTable tr").slice(30).hide();
  var rowCount = $('#myNewTable tr').length;
  //alert(rowCount);
  $(window).scroll(function () {
      if ($(window).scrollTop() + $(window).height() == $(document).height()) {
          $("#myNewTable tr").slice(20).hide();
          alert("bottom");
      }
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="WebPartWPQ1"&gt;
  &lt;div&gt;
      &lt;table&gt;
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr&gt;&lt;td&gt;something1&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something3&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something4&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something5&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something6&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something7&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something8&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something9&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something10&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something11&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something12&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something13&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something14&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something15&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something16&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something17&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something18&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something19&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something20&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something21&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something22&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something23&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something24&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something25&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something26&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something27&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something28&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something29&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;something30&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;...more rows...&lt;/td&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/table&gt;
      &lt;table class="ms-bottompaging"&gt;something&lt;/table&gt;
      &lt;table id="Hero-WPQ1"&gt;something&lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>