talha08 · May 31, 2017 16:20
diff --git a/a--route.php b/a--route.php
 Route::get('my-post', 'PostController@myPost');
diff --git a/b--PostController.php b/b--PostController.php
 namespace App\Http\Controllers;

 use Illuminate\Http\Request;
 use App\Http\Requests;
 use App\Post;

 class PostController extends Controller
 {

    public function myPost(Request $request)
    {
    	$posts = Post::paginate(5);

    	if ($request->ajax()) {
    		$view = view('data',compact('posts'))->render();
            return response()->json(['html'=>$view]);
        }

    	return view('my-post',compact('posts'));
    }

 }
diff --git a/c--data.blade.php b/c--data.blade.php
 @foreach($posts as $post)
 <div>
 	<h3><a href="">{{ $post->title }}</a></h3>
 	<p>{{ str_limit($post->description, 400) }}</p>

 	<div class="text-right">
 		<button class="btn btn-success">Read More</button>
 	</div>

 	<hr style="margin-top:5px;">
 </div>
 @endforeach
diff --git a/d--my-post.blade.php b/d--my-post.blade.php
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Laravel infinite scroll pagination</title>
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  	<style type="text/css">
  		.ajax-load{
  			background: #e1e1e1;
 		    padding: 10px 0px;
 		    width: 100%;
  		}
  	</style>
 </head>
 <body>

 <div class="container">
 	<h2 class="text-center">Laravel infinite scroll pagination</h2>
 	<br/>
 	<div class="col-md-12" id="post-data">
 		@include('data')
 	</div>
 </div>

 <div class="ajax-load text-center" style="display:none">
 	<p><img src="http://demo.itsolutionstuff.com/plugin/loader.gif">Loading More post</p>
 </div>

 <script type="text/javascript">
 	var page = 1;
 	$(window).scroll(function() {
 	    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
 	        page++;
 	        loadMoreData(page);
 	    }
 	});

 	function loadMoreData(page){
 	  $.ajax(
 	        {
 	            url: '?page=' + page,
 	            type: "get",
 	            beforeSend: function()
 	            {
 	                $('.ajax-load').show();
 	            }
 	        })
 	        .done(function(data)
 	        {
 	            if(data.html == " "){
 	                $('.ajax-load').html("No more records found");
 	                return;
 	            }
 	            $('.ajax-load').hide();
 	            $("#post-data").append(data.html);
 	        })
 	        .fail(function(jqXHR, ajaxOptions, thrownError)
 	        {
 	              alert('server not responding...');
 	        });
 	}
 </script>

 </body>
 </html>
diff --git a/e--reference b/e--reference
 1. http://itsolutionstuff.com/post/how-to-implement-infinite-ajax-scroll-pagination-in-laravel-5example.html

 2. http://www.expertphp.in/article/auto-load-more-data-on-page-scroll-with-jquery-and-php-laravel
	namespace App\Http\Controllers;

	use Illuminate\Http\Request;
	use App\Http\Requests;
	use App\Post;

	class PostController extends Controller
	{

	public function myPost(Request $request)
	{
	$posts = Post::paginate(5);

	if ($request->ajax()) {
	$view = view('data',compact('posts'))->render();
	return response()->json(['html'=>$view]);
	}

	return view('my-post',compact('posts'));
	}

	}
	@foreach($posts as $post)
	<div>
	<h3><a href="">{{ $post->title }}</a></h3>
	<p>{{ str_limit($post->description, 400) }}</p>

	<div class="text-right">
	<button class="btn btn-success">Read More</button>
	</div>

	<hr style="margin-top:5px;">
	</div>
	@endforeach
	<!DOCTYPE html>
	<html>
	<head>
	<title>Laravel infinite scroll pagination</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<style type="text/css">
	.ajax-load{
	background: #e1e1e1;
	padding: 10px 0px;
	width: 100%;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h2 class="text-center">Laravel infinite scroll pagination</h2>
	<br/>
	<div class="col-md-12" id="post-data">
	@include('data')
	</div>
	</div>

	<div class="ajax-load text-center" style="display:none">
	<p><img src="http://demo.itsolutionstuff.com/plugin/loader.gif">Loading More post</p>
	</div>

	<script type="text/javascript">
	var page = 1;
	$(window).scroll(function() {
	if($(window).scrollTop() + $(window).height() >= $(document).height()) {
	page++;
	loadMoreData(page);
	}
	});

	function loadMoreData(page){
	$.ajax(
	{
	url: '?page=' + page,
	type: "get",
	beforeSend: function()
	{
	$('.ajax-load').show();
	}
	})
	.done(function(data)
	{
	if(data.html == " "){
	$('.ajax-load').html("No more records found");
	return;
	}
	$('.ajax-load').hide();
	$("#post-data").append(data.html);
	})
	.fail(function(jqXHR, ajaxOptions, thrownError)
	{
	alert('server not responding...');
	});
	}
	</script>

	</body>
	</html>
	1. http://itsolutionstuff.com/post/how-to-implement-infinite-ajax-scroll-pagination-in-laravel-5example.html

	2. http://www.expertphp.in/article/auto-load-more-data-on-page-scroll-with-jquery-and-php-laravel