title: Paginate using Ajax in Laravel
body: <p>I am fairly new to Laravel and now i need to implement ajax functionality to my project. I got it how to display article and create it via ajax, problem occurs when i need to list them. And that has two sub-problems.</p>
  
  <ol>
  <li>Display paginated articles which i did</li>
  <li>and second one which is changing to next page with new set of articles.
  I know how to do this with laravel's pagination, but in this case, pagination also should be done with ajax.</li>
  </ol>
  
  <p>I got some data that i take from ArticlesController which sends json response which looks like this:</p>
  
  <pre><code>{
      status: "success", msg: "Hello!", articles: {…}, request: {…}}
      articles:
      current_page: 1
      data: Array(1)
      0: {id: 3, title: "Post1", body: "&lt;p&gt;&lt;strong&gt;Lorem ipsum&lt;/strong&gt; dolor sit amet, co…ctum. Duis feugiat facilisis lectus a cursus.&lt;/p&gt;", created_at: "2019-06-18 00:23:25", updated_at: "2019-06-18 18:33:52", …}
      length: 1
      __proto__: Array(0)
      first_page_url: "http://articleapp.test/postajax?page=1"
      from: 1
      last_page: 3
      last_page_url: "http://articleapp.test/postajax?page=3"
      next_page_url: "http://articleapp.test/postajax?page=2"
      path: "http://articleapp.test/postajax"
      per_page: 1
      prev_page_url: null
      to: 1
      total: 3
      __proto__: Object
      msg: "Hello!"
      request: {_token: "T31VK2FBVbIBG6IIOK4X4Q0r7WPTlzc7haXCwJrM", message: "bravo"}
      status: "success"
      __proto__: Object
  }
  </code></pre>
  
  <p>Controller method which after received call from ajax function, gathers data and sends it back as json response. One part of that data is paginated records of Articles table:</p>
  
  <pre><code>public function ajaks(Request $request){
  
          if($request-&gt;ajax()){
              $articles = Article::with('user')-&gt;paginate(1);
  
              $response = array(
                  'status' =&gt; 'success',
                  'msg' =&gt; "Hello!",
                  "articles" =&gt; $articles,
                  "request" =&gt; $request-&gt;all(),  
              );
  
              return response()-&gt;json($response);
  
          }
  
     }
  </code></pre>
  
  <p>Ajax function it send request through predetermined route alongside csrf token and in turn receive response. From that response, it constructs html which is afterwards appended to particular div in my layouts blade. Her is ajax function:</p>
  
  <pre><code>function ajaks(/*par*/){
      let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
      console.log("hit");
      $.ajax({
          url: '/postajax',
          type: 'POST',
          data: {_token: token , message: "bravo"},
          dataType: 'JSON',
          success: (response) =&gt; { 
              console.log("success");
              console.log(response);
              let body = "";
              let html = "&lt;div class='container'&gt;";
  
              let len = response.articles.data.length;
              for(let i=0;i&lt;len;i++){
  
                  html += "&lt;div class='row' style='background-color: whitesmoke;'&gt;&lt;div class='col-md-4 col-sm-4'&gt;&lt;a href='/articles/"+response.articles.data[i].id+"'&gt;&lt;img class='postCover postCoverIndex' src='/storage/images/"+response.articles.data[i].image+"'&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class='col-md-8 col-sm-8'&gt;&lt;br&gt;";
  
                  if(response.articles.data[i].body.length &gt; 400){
                      body = response.articles.data[i].body.substring(0, 400)+"&lt;a href='/articles/"+response.articles.data[i].id+"'&gt;...Read more&lt;/a&gt;";
                  }
                  else{
                      body = response.articles.data[i].body;
                  }
  
                  html += "&lt;p&gt;"+body+"&lt;/p&gt;";
                  html += "&lt;small class='timestamp'&gt;Written on "+response.articles.data[i].created_at+" by "+response.articles.data[i].user.name+"&lt;/small&gt;&lt;/div&gt;&lt;/div&gt;&lt;hr class='hrStyle'&gt;";
              }
  
              let pagination = "&lt;div class='container'&gt;&lt;ul class='pagination justify-content-center'&gt;&lt;li class='page-item'&gt;&lt;a class='page-link' href='#'&gt;Previous&lt;/a&gt;&lt;/li&gt;";
              for(let i=0;i&lt;response.articles.last_page;i++){
                  pagination += "&lt;li class='page-item'&gt;&lt;a class='page-link' href='#'&gt;"+(i+1)+"&lt;/a&gt;&lt;/li&gt;";
              }
              pagination += "&lt;li class='page-item'&gt;&lt;a class='page-link' href='#'&gt;Next&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;";
  
  
              //console.log(pagination);
              html += "&lt;/div&gt;"+"&lt;form id='pagForm'&gt;"+pagination+"&lt;/form&gt;";
  
              if(document.getElementById("maine")){
  
                      document.getElementById("maine").innerHTML = html;
              }
          },
          error: (response) =&gt; {
              console.log("error");
              console.log(response);
          }
      }); 
  
  }
  </code></pre>
  
  <p>And with this, i'm checking for ajax route and getting first set of articles:</p>
  
  <pre><code>&lt;?php
  if(Route::getFacadeRoot()-&gt;current()-&gt;uri()=="ajax"){
  ?&gt;
  &lt;script&gt;
      $(document).ready(function(){
          ajaks();
      });
  &lt;/script&gt;
  &lt;?php
  }
  ?&gt;
  </code></pre>
  
  <p>it is in my layouts blade. Also pagination links are just plain bootstrap, it just helps me visualize.
  My question is how i can use this for pagination? What is the correct approach for using ajax since i can't rely on Laravel's built-in pagination for this. Should i attach another ajax function onto pagination links which then would call controller method again? And when controller method receives such via request, how to use that on pagination in controller method?</p>