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

composer create-project laravel/laravel Load_More

php artisan make:model Product -m

 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

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

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.

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

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.

Read More : https://tutspack.com/crud-example-with-repository-design-pattern-in-laravel/