Auto Load More Data on Page Scroll with jQuery and PHP Laravel

Auto Load More Data on Page Scroll with jQuery and PHP Laravel

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 Model

In this step, we will create first products table and model.

app/Product.php
  1. <?php
  2. namespace App;
  3. use Illuminate\Database\Eloquent\Model;
  4. class Product extends Model
  5. {
  6. public $fillable = ['name','details'];
  7. }

I have inserted some dummy records in my products table to see the loader on page scroll.

Step2: Add Routes

In this step, we will add routes to handle request.

app/Http/routes.php
  1. Route::get('jquery-loadmore',['as'=>'jquery-loadmore','uses'=>'FileController@loadMore']);
Step3: Create FileController

In this step, we will create a file controller in following path app/Http/Controllers.

app/Http/Controllers/FileController.php
  1. <?php
  2. namespace App\Http\Controllers;
  3. use Illuminate\Http\Request;
  4. use App\Http\Controllers\Controller;
  5. use App\Product;
  6. class FileController extends Controller {
  7. public function loadMore(Request $request){
  8. $products=Product::paginate(4);
  9. $html='';
  10. foreach ($products as $product) {
  11. $html.='<li>'.$product->id.' <strong>'.$product->name.'</strong> : '.$product->details.'</li>';
  12. }
  13. if ($request->ajax()) {
  14. return $html;
  15. }
  16. return view('files.loadmore',compact('products'));
  17. }
  18. }
Step4: Create Blade File

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)

resources/views/files/loadmore.blade.php
  1. @extends('layouts.default')
  2. @section('content')
  3. <style>
  4. .wrapper > ul#results li {
  5. margin-bottom: 1px;
  6. background: #f9f9f9;
  7. padding: 20px;
  8. list-style: none;
  9. }
  10. .ajax-loading{
  11. text-align: center;
  12. }
  13. </style>
  14. <div class="wrapper">
  15. <ul id="results"><!-- results appear here --></ul>
  16. <div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
  17. </div>
  18. <script>
  19. var page = 1; //track user scroll as page number, right now page number is 1
  20. load_more(page); //initial content load
  21. $(window).scroll(function() { //detect page scroll
  22. if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page
  23. page++; //page number increment
  24. load_more(page); //load content
  25. }
  26. });
  27. function load_more(page){
  28. $.ajax(
  29. {
  30. url: '?page=' + page,
  31. type: "get",
  32. datatype: "html",
  33. beforeSend: function()
  34. {
  35. $('.ajax-loading').show();
  36. }
  37. })
  38. .done(function(data)
  39. {
  40. if(data.length == 0){
  41.     console.log(data.length);
  42. //notify user if nothing to load
  43. $('.ajax-loading').html("No more records!");
  44. return;
  45. }
  46. $('.ajax-loading').hide(); //hide loading animation once data is received
  47. $("#results").append(data); //append data into #results element
  48. })
  49. .fail(function(jqXHR, ajaxOptions, thrownError)
  50. {
  51. alert('No response from server');
  52. });
  53. }
  54. </script>
  55. @endsection

Click here to see demo..

Phone: (+91) 8800417876
Noida, 201301
ataşehir escort maltepe escort bostancı escort kadıköy escort maltepe escort ataşehir escort kurtköy escort kartal escort pendik escort ataşehir escort
şişli escort
pendik escort
izmir escort izmir escort izmir escort izmir escort denizli escort antalya escort antalya escort antalya escort izmir escort izmir escort izmir escort izmir escort izmir escort