title: How to do an Ajax pagination of a JSON request in the frontend with JS / jQuery?
body: <p>First, I know that there is a few similar questions here but after reading probably a dozen I didn't quite find what I'm looking for, as I'm new to JS and Ajax requests.</p>
  
  <p>So, let me explain what I have and what I want:</p>
  
  <p>I have this small webapp doing a search on an API that returns a JSON with a maxResult of 40 items. It can be only 1 item but most of the time is more.</p>
  
  <p>Right now I have everything working and appending the result in the front end, but now I want to make a pagination as 40 results are to much.</p>
  
  <p>I would like to have 5 items per page, and the pages should be ajax, I don't want to reload the entire website, just page inside a container.</p>
  
  <h3>EDIT: check the final code w/o pagination here:</h3>
  
  <p><a href="https://github.com/fleps/gbooks-webapp/blob/master/src/js/app.js" rel="nofollow noreferrer">https://github.com/fleps/gbooks-webapp/blob/master/src/js/app.js</a></p>
  
  <p>Ok, so, when searching I saw a few examples where after appending everything to the HTML a script ran and create the pagination by splinting the content, but I'm not sure that's the right way. Shouldn't the correct approach be to split the result on the <strong>$.each</strong> part and store it and append it to the HTML just when the user requests the next/n page? Wouldn't make the application lighter/faster?</p>
  
  <p>Either way I don't know how to do it as I'm new on all this.</p>
  
  <p>I looked a few jQuery pagination plugins but really didn't understand how to use them with my code and what's the best approach thinking about good JS practices and performance.</p>
  
  <p>Btw I'm using jQuery and Bootstrap 4 UI so I would like to use the pagination UI from them if possible.</p>
  
  <p>Sorry if this is too long and thank's for any help =)</p>