In this tutorial you will learn about the Laravel 7 Load More Data On Infinite Page Scroll and its application with practical example.
In this Laravel 7 Load More Tutorial From Scratch tutorial I’ll show you how to implement infinity scroll or dynamix ajax load more on page scroll in laravel. In this tutorial you will learn to implement dynamic load more pagination in laravel. In this step by step guide I’ll share example of ajax load more or infinity scroll in laravel.
Laravel 7 Load More Data On Infinite Page Scroll
- Download Laravel Fresh Setup
- Configure .env file
- Create One Model and Migration
- Create Route
- Generate Controller by Command
- Create Blade View
- Run Development Server
Step 1: Download Laravel Fresh Setup
First of all we need to create a fresh laravel project, download and install Laravel using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Configure .env file
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here |
Step 3: Create Model and Migration
Now, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan make:model Post -m |
Now, go to app/database/migrations and open posts migration file and put following fields
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreatePostsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('contacts', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->text('description'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('contacts'); } } |
Now, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan migrate |
Step 4: Create Route
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 |
Route::get('posts', 'PostController@index'); |
Step 5: Generate Controller by Command
Now, lets create a controller named PostController using command given below –
|
1 |
php artisan make:controller PostController |
Now, go to app/http/controller/PostController and open PostController. And put the following code into your PostController file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Validator,Redirect,Response; use App\Post; class PostController extends Controller { public function index(Request $request) { $posts = Post::paginate(8); $data = ''; if ($request->ajax()) { foreach ($posts as $post) { $data.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>'; } return $data; } return view('posts'); } } |
Step 6: Create a blade view
Now, we will create a blade file name posts.blade.php. And update the below HTML code into your posts.blade.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel load more page scroll</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> .wrapper > ul#results li { margin-bottom: 2px; background: #e2e2e2; padding: 20px; width: 97%; list-style: none; } .ajax-loading{ text-align: center; } </style> </head> <body> <div class="container"> <div class="wrapper"> <ul id="results"><!-- results appear here --></ul> <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div> </div> </div> </body> </html> |
This blade view file displays your all blog posts when you scroll the page down. Now, update the following script into your blade view file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script> var SITEURL = "{{ url('/') }}"; var page = 1; //track user scroll as page number, right now page number is 1 load_more(page); //initial content load $(window).scroll(function() { //detect page scroll if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page page++; //page number increment load_more(page); //load content } }); function load_more(page){ $.ajax({ url: SITEURL + "posts?page=" + page, type: "get", datatype: "html", beforeSend: function() { $('.ajax-loading').show(); } }) .done(function(data) { if(data.length == 0){ console.log(data.length); //notify user if nothing to load $('.ajax-loading').html("No more records!"); return; } $('.ajax-loading').hide(); //hide loading animation once data is received $("#results").append(data); //append data into #results element console.log('data.length'); }) .fail(function(jqXHR, ajaxOptions, thrownError) { alert('No response from server'); }); } </script> |
Step 7: Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://127.0.0.1:8000/posts |
