title: Elegantly add rows of pre-loaded data to an html table using jQuery to mimic infinite scrolling
body: <p>I have jinja template that shows a python list of lists (called table) as an html table</p>
  
  <pre><code>&lt;div class="datagrid"&gt;&lt;table id="datatable" &gt;
  &lt;tbody&gt;
  {% if table|count &lt; 10 %}
      {% set pagelen = table|count %}
  {% else %}
      {% set pagelen = 10 %}
  {% endif %}
  
  //store jinja object to be used by jQuery
  
  &lt;meta id="data" data-name="{{table[pagelen:]}}"&gt;
  
  {% for n in range(pagelen) %}
  
      &lt;tr&gt;&lt;td&gt;{{table[n][0]}}&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="url"&gt;&lt;td&gt;&lt;a href={{url}}&gt;{{table[n][1]}}&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="content"&gt;&lt;td&gt;{{table[n][2]|safe}}&lt;/td&gt;&lt;/tr&gt;
  
  {% endfor %}
  &lt;/tbody&gt;
  &lt;/table&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I dont wantt to show the entire table to the user but rather have them scroll to the bottom of the page and append a set number of rows to the table. To this end I am using jQuery</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
  function loadMore()
  {
  
      console.log("More loaded");
      $(window).bind('scroll');
      var $tr = $('&lt;tr&gt;').append(
                  $('&lt;td&gt;').text('Heading')
              ).appendTo('#datatable');
      //console.log($tr.wrap('&lt;p&gt;').html());
  
      //function to unpack the data object that stores table values. 
      //The problem here is that the values are stored as string
  
      $.each( $('#data').data(), function( key, value ) {
                  console.log($.type(value))
          });    
  }
  
  $(window).scroll(function(){
      var scrollHeight = $(document).height();
      var scrollPosition = $(window).height() + $(window).scrollTop(); 
      console.log('scrollHeight Calc: '+((scrollHeight - scrollPosition) / scrollHeight))
      console.log('scrollPosition: '+scrollPosition)
      if ((scrollHeight - scrollPosition) / scrollHeight &lt;= 0.01) {
          // when scroll to bottom of the page
          alert('bottom');
          $(window).unbind('scroll');
          loadMore();
      }
  })
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>The scroll function calls the loadMore untion whenever we reach the bottom of the page. I have a mock-up of what I wish to do. I am able to attach a row to the table. The problem is getting the data in. The data comes in jinja object but now I have to convert it into jQuery object. I tried doing that by first creating an element and then passing the id to the script but that converts the object into string. </p>
  
  <ul>
  <li>Is there a better way of going about this.</li>
  <li>If not can someone provide an elegant solution to the problem I am
  facing. Mainly how to provide the jinja list of lists to jQuery.</li>
  </ul>