Surfe.be - passive income

Pagination in Laravel using Ajax

Pagination in Laravel using Ajax

Today, I am going to share with you how to make easy jquery ajax pagination in Laravel application. As you know Pagination help us to load few records every time, that way can not broken web page due to lots of data. If you are making pagination and do it using jquery ajax then it more beautiful. Ajax Pagination load only your table data instead of whole page. So ajax pagination is very helpful. In this post i am going to make it. So let's learn how to make it. 

ajax pagination in laravel

Pagination Using Ajax

For doing it we have to follow some instructions. So follow one after another 

Migration Table

php artisan make:model Todo -m

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create todos table.

public function up() { 
 Schema::create('items', function (Blueprint $table) { 
 $table->increments('id'); 
 $table->string('title'); 
 $table->string('body'); 
 $table->timestamps(); }); 
}

Create New Route

In this is step we need to create routes for todos . So open your routes/web.php file and add following code.

Route::get('pagination',array('as'=>'pagination','uses'=>'PaginationController@ajaxPagination'));

Create New Controller 

php artisan make:controller PaginationController

After making it paste the following code to your app/Http/Controllers/PaginationController.php file

namespace App\Http\Controllers; 
use Illuminate\Http\Request; 
use App\Todo; 
class PaginationController extends Controller { 
 
$items = Todo::where('created_at' , 'DESC')->paginate(5);

         if (\Request::ajax()) {
            return \Response::json(\View::make('frontend.ajax.data')->with(compact('items'))->render());
        }

        return \View::make('index')->with(compact('items'));
    }

}

Finally Create View File

Now go to your resources/views/todo.blade.php and paste those following code

@include('frontend.layout.header')

<!-- Your HTMl code goes here -->
   

    <div id="post-ajax">
       @include('frontend.ajax.data')
    </div>
                 
      <script>
    
        // Ajax pagination

        $(function() {
            $('#post-ajax').on('click', '.pagination a', function (e) {
                getPosts($(this).attr('href').split('page=')[1]);
                e.preventDefault();
            });
        });

        function getPosts(page) {
            $.ajax({
                url : '?page=' + page,
                dataType: 'json',
            }).done(function (data) {
                $('#post-ajax').html(data);
            }).fail(function () {
                alert('Posts could not be loaded.');
            });
        }
    </script>

@include('frontend.layout.footer')

Print Todo Data 

Now go to your resources/views/data.blade.php and paste those following code

@foreach ($items as $item)
                       
  <p>${{$item->name}}</p>
  <p>${{$item->body}}</p>
                               
@endforeach
              
 {!! $items->render() !!}

That’s it. Hope this tutorial will help you. If you like this tutorial please leave a comment and don’t forget to share . 

Leave a comments

LET'S SOCIALITE

Recent Tweets