Level 1
Hi Ozan,
Having the same problem here. What was the solution?
Feb 3, 2015
7
Level 32
Laravel 5 Custom Views For Pagination
I tried to make a custom pagination links view. So far i have got this:
<?php namespace App\Kurt;
use Illuminate\Pagination\BootstrapThreePresenter;
class CustomPaginationLinks extends BootstrapThreePresenter {
//<li><a href="#">«</a></li>
//<li><a href="#">1</a></li>
//<li><span>2</span></li>
//<li><a href="#">3</a></li>
//<li><a href="#">4</a></li>
//<li><a href="#">5</a></li>
//<li><a href="#">»</a></li>
public function getActivePageWrapper($text)
{
return '<li><span>'.$text.'</span></li>';
}
public function getDisabledTextWrapper($text)
{
return '<li class="disabled"><a href="#">'.$text.'</a></li>';
}
public function getPageLinkWrapper($url, $page, $rel = null)
{
return '<li><a href="'.$url.'">'.$page.'</a></li>';
}
public function render()
{
if ($this->hasPages())
{
return sprintf(
'%s %s %s',
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton()
);
}
return '';
}
}
And here is my blade file:
<div class="row">
<div class="col-md-4 col-sm-4 items-info">Items 1 to 9 of 10 total</div>
<div class="col-md-8 col-sm-8">
<ul class="pagination pull-right">
{!! with(new App\Kurt\CustomPaginationLinks($products))->render() !!}
</ul>
</div>
</div>
It works exactly how i want with disabled and active links but fails at current page button (links).
Level 32
@adams No idea adams. I guess nobody knows that yet... :'(
Level 1
Hi Ozan,
I believe the issue is caused by you overwritting the "getPageLinkWrapper" method. The inherited "getPageLinkWrapper" method contains the logic for calling the "getActivePageWrapper" method for the current page link and calling the "getAvailablePageWrapper" method for all other (non-disabled) links.
To fix it you should rename the current "getPageLinkWrapper" method to "getAvailablePageWrapper".
<?php namespace App\Kurt;
use Illuminate\Pagination\BootstrapThreePresenter;
class CustomPaginationLinks extends BootstrapThreePresenter {
//<li><a href="#">«</a></li>
//<li><a href="#">1</a></li>
//<li><span>2</span></li>
//<li><a href="#">3</a></li>
//<li><a href="#">4</a></li>
//<li><a href="#">5</a></li>
//<li><a href="#">»</a></li>
public function getActivePageWrapper($text)
{
return '<li><span>'.$text.'</span></li>';
}
public function getDisabledTextWrapper($text)
{
return '<li class="disabled"><a href="#">'.$text.'</a></li>';
}
public function getAvailablePageWrapper($url, $page, $rel = null)
{
return '<li><a href="'.$url.'">'.$page.'</a></li>';
}
public function render()
{
if ($this->hasPages())
{
return sprintf(
'%s %s %s',
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton()
);
}
return '';
}
}
1 like
Level 1
Level 3
Has anyone come up with any solution(s), me too struck at this point.
Thanks.
Level 1
for making a custom pagination in laravel 5 follow steps blow : step1 . in your controller where you fetch records from db , store links of fetched records in a variable as blow : example :
class PostController extends Controller {
public function index() {
$posts = Post::where('active',1)->orderBy('updated_at','desc')->Paginate(10)
$links = str_replace('/?', '?', $posts->render());
return view('front.posts', compact('posts', 'links'));
}
}
step2. in your view file where you display the records, place code blow where you want to show pagination links :
<--begin of pagination -->
{!! $links !!}
<--end of pagination -->
step 3. in your css file you can use styling like blow to style pagination links :
/* Pagination styling */ .pagination { display: inline-block; padding-right: 0; margin: 20px 0; border-radius: 4px; float: right; } .pagination>li { display: inline } .pagination>li>a, .pagination>li>span { position: relative; float: right; padding: 6px 12px; line-height: 1.428571429; text-decoration: none; color: #333333; background-color: #fff; border: 1px solid #e4e4e4; } .pagination>li:first-child>a, .pagination>li:first-child>span { margin-right: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px } .pagination>li:last-child>a, .pagination>li:last-child>span { border-bottom-left-radius: 4px; border-top-left-radius: 4px } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { color: #fff; background-color: #ffae12; border-color: #ffae12 } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { z-index: 2; color: #fff; background-color: #F2541B; border-color: #F2541B; cursor: default } .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus { color: #777; background-color: #fff; border-color: #ddd; cursor: not-allowed } .pagination-lg>li>a, .pagination-lg>li>span { padding: 10px 16px; font-size: 18px } .pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span { border-bottom-right-radius: 6px; border-top-right-radius: 6px } .pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span { border-bottom-left-radius: 6px; border-top-left-radius: 6px } .pagination-sm>li>a, .pagination-sm>li>span { padding: 5px 10px; font-size: 12px } .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span { border-bottom-right-radius: 3px; border-top-rightt-radius: 3px } .pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span { border-bottom-left-radius: 3px; border-top-left-radius: 3px }
2 likes
Level 50
This worked for me:
https://iwader.co.uk/post/bootstrap-4-pagination-with-laravel
Please or to participate in this conversation.