Spread the love

Hello Aritsans,

How are you doing? In this tutorial, I’ll show you how to implement load more data in Laravel using Ajax/Axios with a button click. I will show you everything step by step from scratch so that you can understand the main concept and implement other projects. So here we go.

Load more Data in Laravel using Ajax/Axios

Step 1 – Install Laravel and connect with a database

composer create-project laravel/laravel Load_More

Step 2 – Make a Model

php artisan make:model Product -m

It will make Product.php and a migration file in your app/Http/Models folder and database/migrations folder.I make a demo product model. You can make as per your requirements. then go to migration file and paste the code inside the up() fucntion.

 public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('text');
            $table->float('price')->default(50);
            $table->timestamps();
        });
    }

Then run php artisan:migrate

Don’t forget to fillable migration columns in your Product.php file.

  protected $fillable = ['name','text','price'];

then you need to generate fake data using Seeder/Factory for testing purposes. I have made a tutorial on How to generate fake data in Laravel using factory and faker you can follow this tutorial to generate fake data.

Well, I assumed you have generated fake data. So go to thenext step.

Step 3 – Make a Controller

php artisan make:controller LoadMoreDataController

It will make the LoadMoreDataController.php file under the app/Http/Controllers folder. In this controller, we have to write all our all logic and conditions.

public function index(){
        return view('load.index');
    }

    public function loadMoreData(Request $request)
    {
        if ($request->id > 0) {
            //info($request->id);
            info('clicked');
            $data = Product::with('category')
                    ->where('id','<',$request->id)
                    ->orderBy('id','DESC')
                    ->limit(2)
                    ->get();
        } else {
            $data = Product::with('category')->limit(2)->orderBy('id', 'DESC')->get();
        }

        $output = '';
        $last_id = '';

        if (!$data->isEmpty()) {
            foreach ($data as $row) {
                $output .= '
                <div class="row">
                <div class="col-md-12">
                <span class="text-info">'.$row->id.'</span>
                <h3 class="text-info"><b>' . $row->name . '</b></h3>
                <p>' . $row->category->name . '</p>
                <hr />
                </div>
                </div>
                ';
                $last_id = $row->id ;
            }
            $output .= '
       <div id="load_more">
        <button type="button" name="load_more_button" class="btn btn-success form-control" data-id="' . $last_id . '" id="load_more_button">Load More</button>

       </div>
       ';
        } else {
            $output .= '
       <div id="load_more">
        <button type="button" name="load_more_button" class="btn btn-info form-control">No Data Found</button>
       </div>
       ';
        }
        return $output;
    }

Copy and paste this two methods in this LoadMoreDataController . Ok Let’s jump the next step.

Step 4 – Make two Routes

Go to routes/web.php file. Write two line of code.

Route::get('load-data',[LoadMoreDataController::class,'index']);
Route::post('load-data', [LoadMoreDataController::class, 'loadMoreData'])->name('load-data');

Step 5 – Make a View to show your output

I have made a view file in layouts/views folder. You have to link up the bootstrap, jquery, Axios files I have added those in my layout file which I extended. Now copy and paste this code.

@extends('layouts.app')

@section('title','Load Data')

@section('content')
<div class="container my-3">
    <h2 class="text-center">Load More Data By Ajax</h2>
    <hr>
</div>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-8">
            <div id="loadData"></div>
        </div>
    </div>
</div>
@stop

@push('script')
    <script>
        function loadMoreData(id=0){
            axios.post('{{ route("load-data") }}',{ id : id})
            .then(res => {
               //console.log(res.data);
                   $('#load_more_button').remove();
                   $('#loadData').append(res.data);
            })
            .catch(err => {
                console.log(err);
            })
        }
        loadMoreData(0);
        $(document).on('click', '#load_more_button', function(){
        var id = $(this).data('id');
        //console.log(id);
        $('#load_more_button').html('<b>Loading...</b>');
        loadMoreData(id);
    });

    </script>
@endpush

now run php aritsan serve and hit http://127.0.0.1:8000/load-data

Hope It will helps you.

Spread the love