title: Adding infinite scroll in thymeleaf repeater on client side
body: <p>My application uses Spring Boot and Thymeleaf.</p>
  
  <p>I am using a repeater in thymeleaf to show the content like following - </p>
  
  <pre><code>&lt;div th:each="response : ${ctrlResponse}"&gt;
  //display response data here
  &lt;/div&gt;
  </code></pre>
  
  <p>The response "ctrlResponse" can have 100s of records. If I render all records at once it will impact my page performance.
  In my previous application I was using angular and I was able to add a page scroll using "limitTo" filter. How can I achieve this using jquery ?</p>
  
  <p>The questions I've been going through fetch the data from server when end of page is reached. I cannot do that as my controller gets the response from a REST service in JSON format and adds it to ModelAndView.</p>
  
  <pre><code>ModelAndView mv = new ModelAndView("list");
  Response response = helper.search(searchModel);
  mv.addObject("ctrlResponse", response);
  </code></pre>
  
  <p>I just want that my repeater displays a set number of records initially(say 10) and then load the next 10 records into DOM when some button is clicked or page is scrolled. Just like limitTo filter would do in angularjs.</p>
  
  <p>Thanks in advance !</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I was able to implement <a href="https://github.com/gbirke/jquery_pagination" rel="nofollow noreferrer">G Birke's jQuery Pagination plugin </a> in my case. This plugin gets the data in chunks from a hidden div containing all data in HTML page. According to <a href="https://stackoverflow.com/questions/19161886/prevent-browser-rendering-of-displaynone-html">this</a> link "display:none" has no effect on page rendering speed, therefore if I keep my HTML content in a hidden div and fetch data from it in chunks to show in a paginated form, it should be a better solution than showing all the data in a go. </p>