title: AJAX pagination with Laravel
body: <p>I have this view called <code>posts.blade.php</code> which gets included in <code>home.blade.php</code>:</p>
  
  <pre><code>&lt;div id="posts"&gt;
      @foreach ($posts as $post)
          &lt;div class="list-item clearfix"&gt;
              &lt;div class="content"&gt;
                  &lt;img src="{{ URL::to($post-&gt;thumbnail) }}" alt="" /&gt;
                  &lt;h1&gt;{{{ $post-&gt;title }}}&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="score"&gt;{{ $post-&gt;rating }}&lt;/div&gt;
          &lt;/div&gt;
      @endforeach
      &lt;div id="pagination"&gt;{{{ $posts-&gt;links() }}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When a user searches for certain posts, the controller's <code>postSearch()</code> function returns a JSON response:</p>
  
  <pre><code>function postSearch() 
  {
      $posts = $posts-&gt;select(...)-&gt;where(...)-&gt;orderBy(...)-&gt;paginate(5); //Search posts
  
      return Response::json(View::make('includes.posts', ['posts' =&gt; $posts])-&gt;render());
  }
  </code></pre>
  
  <p>And jQuery appends the HTML on the <code>#posts</code> div:</p>
  
  <pre><code>$('#search').submit(function(e) {
      e.preventDefault();
      var form = $(this);
  
      $.post(form.attr('action'), form.serialize(), function(data) {
          $('#posts').html(data);
      });
  });
  </code></pre>
  
  <p>This works perfect. But now when I click on a pagination link, the page reloads and my search results are gone (obvious). How do I paginate these posts? I've read <a href="http://forumsarchive.laravel.io/viewtopic.php?pid=45871" rel="noreferrer">this</a>, <a href="http://www.laravel-tricks.com/tricks/easy-ajax-pagination" rel="noreferrer">this</a> and <a href="https://gist.github.com/tobysteward/6163902" rel="noreferrer">this</a> article, but I don't understand how to implement it.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>This is my jQuery for the pagination so far:</p>
  
  <pre><code>$('#posts').on('click', '.pagination a', function(e) {
      e.preventDefault();
      var url = $(this).attr('href'),
          page = url.split('page=')[1],
          data = $('#search').serializeArray();
  
      data.push({page: page}); // Add page variable to post data
      console.log(data);
  
      $.post($('#search').attr('action'), data, function(data) {
          $('#posts').html(data['posts']);
      });
  });
  </code></pre>
  
  <p>This is data is being send when I click on a pagination link (page 2):</p>
  
  <p><img src="https://i.stack.imgur.com/RvRVN.png" alt="enter image description here"></p>
  
  <p>Unfortunately nothing happens, the posts from page 1 keep showing.</p>