Saturday 1 September 2018

Laravel Pagination using Ajax



In this post, we have covered topic on PHP Laravel framework on How to Create an Ajax pagination using Laravel with jQuery. In this article, you can find how to make simple and easy Ajax jQuery pagination in Laravel from scratch step by step. We have already know Pagination in web development is a required feature for load data in different which we have all see in most of the website Admin panel, ERP software, CMS. Main functionality of pagination is to load some data every time and it will help web page to not broken on loading of large amount of data. If we have use Ajax jQeury for creating pagination then it will more flexible and beautiful of loading data without refresh of web page.

If we have use Ajax Pagination in our web application then it will load only table data instead of refresh of whole page data. So, Every web developer has use Ajax in their pagination which very helpful to user of web application. Here in this post we will developing simple Ajax pagination in Laravel application.

For implementing Ajax pagination in Laravel you have to just follow below steps.




Step 1 : Download Laravel Application


Here we are starting from very basic, So you have not laravel application downloaded in you computer then you have to type following command for download fresh Laravel in your local computer. Below command you have to write under command prompt.


composer create-project --prefer-dist laravel/laravel student_crud


Step2 : Make Database connection


This is second step and here we will make database connection, for this you have to add following data in your .env file. In this file you have define host name, database name, username and password.


DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=root
DB_PASSWORD=






Step 3 : Create Controller


This is third step in which we want to make controller for handle http request of our web application. This will also handle ajax request also which has been send from view file.

app/Http/Controllers/PaginationController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use DB;

class PaginationController extends Controller
{
    function index()
    {
     $data = DB::table('posts')->paginate(5);
     return view('pagination', compact('data'));
    }

    function fetch_data(Request $request)
    {
     if($request->ajax())
     {
      $data = DB::table('posts')->paginate(5);
      return view('pagination_data', compact('data'))->render();
     }
    }
}
?>


Step 4 : Create View


Once you have make controller then for display controller data on web page we want to make on view file. Here for Ajax pagination here we have make two view file in file we will only dislay controller data and in seocnd view file we will include controller data file in second file and in second view file we have imported jQeury and Bootstrap library links.

resources/views/pagination.blade.php


<!DOCTYPE html>
<html>
 <head>
  <title>Laravel Pagination using Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">
   .box{
    width:600px;
    margin:0 auto;
   }
  </style>
 </head>
 <body>
  <br />
  <div class="container">
   <h3 align="center">Laravel Pagination using Ajax</h3><br />
   <div id="table_data">
    @include('pagination_data')
   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 $(document).on('click', '.pagination a', function(event){
  event.preventDefault(); 
  var page = $(this).attr('href').split('page=')[1];
  fetch_data(page);
 });

 function fetch_data(page)
 {
  $.ajax({
   url:"/pagination/fetch_data?page="+page,
   success:function(data)
   {
    $('#table_data').html(data);
   }
  });
 }
 
});
</script>


resources/views/pagination_data.blade.php

                                 <div class="table-responsive">
     <table class="table table-striped table-bordered">
      <tr>
       <th width="5%">ID</th>
       <th width="38%">Title</th>
       <th width="57%">Description</th>
      </tr>
      @foreach($data as $row)
      <tr>
       <td>{{ $row->id }}</td>
       <td>{{ $row->post_title }}</td>
       <td>{{ $row->post_description }}</td>
      </tr>
      @endforeach
     </table>

     {!! $data->links() !!}

    </div>


Step 5 : Set Route


This is last step in making Ajax Pagination in Laravel and lastly we want to set route for controller index() and fetch_data() method. Below you can find route code below.

routes/web.php

<?php

Route::get('/pagination', 'PaginationController@index');
Route::get('pagination/fetch_data', 'PaginationController@fetch_data');

?>

So here our code is ready, now we want to run this application we have to go to command prompt and write following command.


php artisan serve


Once this command successfully run then it will provide you base url of your Laravel Ajax pagination. For run pagination application in Laravel using Ajax you have to write following link in your web browser.


http://127.0.0.1:8000/pagination


19 comments:

  1. Congratulations, great post!

    ReplyDelete
  2. thanks it's working i just make a mistake in the number of insert

    ReplyDelete
  3. Works perfect.
    Thank you!

    ReplyDelete
  4. still reload page when use the pagination

    ReplyDelete
    Replies
    1. bro use class (justify-between) at the place of pagination in jquery code.
      bcox laravel use tailwind css.
      if you want to use same as pagination class then do some changes in
      App/provider/serviceprovider
      under this file write the below code under the boot function
      and use this at the top of this file(service provider file)

      use Illuminate\Pagination\Paginator;(use this at the top of service provider file)

      public function boot()
      {
      Paginator::useBootstrap();
      }

      *after this code pagination use bootstrap instead of tailwind
      Now Reloading Problem solved.

      Delete
  5. Thank you so much it's working.

    ReplyDelete
  6. Hello! thanks for the great work!
    How to implement this with the ajax live search form tutorial u did earlier

    ReplyDelete
  7. It did not work.. It's still reloading the page

    ReplyDelete
  8. Great Work, Worked for me. :)

    ReplyDelete
  9. Great!. It was supper help. Thanks

    ReplyDelete
  10. I have this error could someone help me please?

    Uncaught TypeError: Cannot read property 'split' of undefined

    ReplyDelete