<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Laravel AJAX Pagination with JQuery</title> | |
</head> | |
<body> | |
<h1>Posts</h1> | |
<div class="posts"> | |
@include('posts') | |
</div> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
<script> | |
$(window).on('hashchange', function() { | |
if (window.location.hash) { | |
var page = window.location.hash.replace('#', ''); | |
if (page == Number.NaN || page <= 0) { | |
return false; | |
} else { | |
getPosts(page); | |
} | |
} | |
}); | |
$(document).ready(function() { | |
$(document).on('click', '.pagination a', function (e) { | |
getPosts($(this).attr('href').split('page=')[1]); | |
e.preventDefault(); | |
}); | |
}); | |
function getPosts(page) { | |
$.ajax({ | |
url : '?page=' + page, | |
dataType: 'json', | |
}).done(function (data) { | |
$('.posts').html(data); | |
location.hash = page; | |
}).fail(function () { | |
alert('Posts could not be loaded.'); | |
}); | |
} | |
</script> | |
</body> | |
</html> |
<?php | |
class BlogController extends Controller | |
{ | |
/** | |
* Posts | |
* | |
* @return void | |
*/ | |
public function showPosts() | |
{ | |
$posts = Post::paginate(5); | |
if (Request::ajax()) { | |
return Response::json(View::make('posts', array('posts' => $posts))->render()); | |
} | |
return View::make('blog', array('posts' => $posts)); | |
} | |
} |
@foreach ($posts as $post) | |
<article> | |
<h2>{{ $post->title }}</h2> | |
{{ $post->summary }} | |
</article> | |
@endforeach | |
{{ $posts->links() }} |
This comment has been minimized.
This comment has been minimized.
I cant see any routes defined. How does your url know that it should reference BlogController?? |
This comment has been minimized.
This comment has been minimized.
Thanks! |
This comment has been minimized.
This comment has been minimized.
This is great! Any idea on how to change the 'page' parameter in the url instead of adding a hash at the end? |
This comment has been minimized.
This comment has been minimized.
Thanks @tobysteward, you saved my day!! :) |
This comment has been minimized.
This comment has been minimized.
Already tested and its work! Thanks |
This comment has been minimized.
This comment has been minimized.
Thanks @tobysteward :) |
This comment has been minimized.
This comment has been minimized.
Yes!!! Thanks awesome response! I take your idea to make my solution :) |
This comment has been minimized.
This comment has been minimized.
Url not found! Route::get('/ajax/pagination',array('before' =>'auth' , function getPosts(page) { Laravel 4.2, ajax url problem How can I solve it ? |
This comment has been minimized.
This comment has been minimized.
Save my day. Thanks. @infoshahin check the jQuery ajax documentation, your relative url here might be wrong. |
This comment has been minimized.
This comment has been minimized.
This is great. Thanks |
This comment has been minimized.
This comment has been minimized.
Thanks a lot.
I hope that someone can help me to clarify my doubts. Thanks again. |
This comment has been minimized.
This comment has been minimized.
Good! Thanks :D |
This comment has been minimized.
This comment has been minimized.
any one guide me i have an error how can i solve it ? |
This comment has been minimized.
This comment has been minimized.
@mudasirsyed93 |
This comment has been minimized.
This comment has been minimized.
This works great, the only issue I'm having is that the currentPage doesn't go back to the front-end. So when using pagination controls to go to page 2, page 1 stays the active link. Any solution? |
This comment has been minimized.
This comment has been minimized.
This really great thanks :) But i have an issue my request on next or page number click makes ajax request twice for same page number and results are same for both requests. Any One help Me please thanks in advance. |
This comment has been minimized.
This comment has been minimized.
@Rexeh you should put @qaiserjaffri remove
|
This comment has been minimized.
This comment has been minimized.
when I clicked page 2 . the result will display when I clicked back to 1 it doesn't display the page 1 |
This comment has been minimized.
This comment has been minimized.
Thanx |
This comment has been minimized.
This comment has been minimized.
anyone help me to write route for this ? i am using Laravel i am having problem when click on link it gave error |
This comment has been minimized.
This comment has been minimized.
If you're getting an error after clicking a pagination link, it's possible you need to include View and Response in your controller at the top. That's what I forgot to put in initially. use View; |
This comment has been minimized.
This comment has been minimized.
Thanks, really useful. |
This comment has been minimized.
This comment has been minimized.
This is working in Laravel 5.3. Thank you very much. @mohamedaimann |
This comment has been minimized.
This comment has been minimized.
Nice colours! |
This comment has been minimized.
This comment has been minimized.
g8 m8 i r8 8/8, no h8 |
This comment has been minimized.
This comment has been minimized.
super! Thanks for this example! |
This comment has been minimized.
This comment has been minimized.
Excellent stuff. |
This comment has been minimized.
This comment has been minimized.
I do this function for use in laravel, it's run perfectly
|
This comment has been minimized.
This comment has been minimized.
Thank You Very Much |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
@Tungquantedge, Change line |
This comment has been minimized.
This comment has been minimized.
Thnkew very much Dear. |
This comment has been minimized.
This comment has been minimized.
@flycoop Did you found any idea to remove #1, #2.... in the URL? |
This comment has been minimized.
This comment has been minimized.
thanks worked well |
This comment has been minimized.
This comment has been minimized.
This work well, just need to put the correct url and the div you want to load data. Thanx |
This comment has been minimized.
This comment has been minimized.
Hi, |
This comment has been minimized.
This comment has been minimized.
Thank you very much dear. |
This comment has been minimized.
This comment has been minimized.
Thanks for this, worked fine |
This comment has been minimized.
This comment has been minimized.
I CONSIDER YOU A FUCK1NG GENIUS Why we didn't think about FUCK1NG LOVE LARAVEL TOO |
This comment has been minimized.
Works great! Thanks! Added some animations myself to make it look like the information would silde out and slide in.