In this tutorial, I will tell you how to auto load more data on page scroll from database using jQuery and PHP Laravel.
You don't have need to click anywhere to load data because data is loading on page scroll automatically from MySQl database.
There are so many website that use the same logic to load data on page scroll, this is very useful with several cases.
It will check if data length is equal to 0 then display message for "No more records!" and if data length is more than 0 then it append html data to list.
Here is a simple step to let you know about loading data automatically on page scroll from top to bottom using jQuery and PHP.
Step1: Create Table and ModelIn this step, we will create first products table and model.
app/Product.php
- <?php
- namespace App;
- use Illuminate\Database\Eloquent\Model;
- class Product extends Model
- {
- public $fillable = ['name','details'];
- }
I have inserted some dummy records in my products table to see the loader on page scroll.
Step2: Add RoutesIn this step, we will add routes to handle request.
app/Http/routes.php
- Route::get('jquery-loadmore',['as'=>'jquery-loadmore','uses'=>'FileController@loadMore']);
In this step, we will create a file controller in following path app/Http/Controllers.
app/Http/Controllers/FileController.php
- <?php
- namespace App\Http\Controllers;
- use Illuminate\Http\Request;
- use App\Http\Controllers\Controller;
- use App\Product;
- class FileController extends Controller {
- public function loadMore(Request $request){
- $products=Product::paginate(4);
- $html='';
- foreach ($products as $product) {
- $html.='<li>'.$product->id.' <strong>'.$product->name.'</strong> : '.$product->details.'</li>';
- }
- if ($request->ajax()) {
- return $html;
- }
- return view('files.loadmore',compact('products'));
- }
- }
In this step, we will create a view file within files directory so first create files directory and then create loadmore.blade.php within file directory directory (resources/views/files/loadmore.blade.php)
- @extends('layouts.default')
- @section('content')
- <style>
- .wrapper > ul#results li {
- margin-bottom: 1px;
- background: #f9f9f9;
- padding: 20px;
- list-style: none;
- }
- .ajax-loading{
- text-align: center;
- }
- </style>
- <div class="wrapper">
- <ul id="results"><!-- results appear here --></ul>
- <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
- </div>
- <script>
- 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: '?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
- })
- .fail(function(jqXHR, ajaxOptions, thrownError)
- {
- alert('No response from server');
- });
- }
- </script>
- @endsection
Click here to see demo..
