I ran the command to generate the customization files for my blog's pagination.
I was able to customize the appearance of the buttons but the issue I now have is that when the page number gets to say 8, the pagination link shows up to 8 links. I would like to implement the '...' separator within the link. My bootstrap-4.blade.php is as follows
<div class="row">
<div class="col-12">
<ul class="pagination justify-content-center">
{{-- Previous Page Link --}}
#if ($paginator->onFirstPage())
<li>
<a aria-label="Next">
<i class="fas fa-arrow-left"></i>
</a>
</li>
#else
<li class="px-1">
<span><i class="fas fa-arrow-left"></i></span>
</li>
#endif
{{-- Pagination Elements --}}
#foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
#if ($paginator->currentPage() > 4 && $page === 2)
<li class="px-1"><span class="page-link">...</span></li>
#endif
{{-- Array Of Links --}}
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li class="px-1"><a style="background:#56107c; color:white; cursor:not-allowed;" href="{{ $url }}">{{ $page }}</a></li>
#else
<li class="px-1">{{ $page }}</li>
#endif
#endforeach
#endif
#endforeach
{{-- Next Page Link --}}
#if ($paginator->hasMorePages())
<li class="px-1">
<span><i class="fas fa-arrow-right"></i></span>
</li>
#else
<li>
<a aria-label="Next">
<i class="fas fa-arrow-right"></i>
</a>
</li>
#endif
</ul>
</div>
</div>
#endif
You can use a built in function $posts->links(), it will auto create everything - links, numbers and next.
Related
Guys
I'm using Laravel's default pagination with bootstrap as its styling framework.
I want to direct my page to certain html section after I click the pagination link, so far I only know how to paginate like the following codes:
Controller:
$data = Products::paginate(9);
return view('index', ['data' => $data]);
Blade:
{{ $data->links() }}
So, I want to direct my page to a certain section in html everytime I clicked the pagination link button. how can I achieve that?
I'm sorry for my poor explanation, hit me up if you need more detail.
Thank You
you should make a blade file like this:
pagination.blade.php
#if ($paginator->hasPages())
<ul class="pagination justify-content-center">
#if ($paginator->onFirstPage())
<li class="paginate_button page-item previous disabled">
قبلی
</li>
#else
<li class="paginate_button page-item previous">
pre
</li>
#endif
#foreach ($elements as $element)
#if (is_string($element))
<li class="paginate_button page-item active">
<a href="javascript:void(0)" class="page-link" >{{ $element }}</a>
</li>
#endif
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li class="paginate_button page-item active">{{ $page }}</li>
#else
<li class="paginate_button page-item ">{{ $page }}</li>
#endif
#endforeach
#endif
#endforeach
{{-- next page --}}
#if ($paginator->hasMorePages())
<li class="paginate_button page-item next ">
next
</li>
#else
<li class="paginate_button page-item next disabled">
بعدی
</li>
#endif
</ul>
#endif
then create a blade file like this:
table.blade.php
#if(isset($permissions))
#php
$paginator=$permissions;
#endphp
<table class="table table-striped">
<thead>
<tr>
heaers tags
</tr>
</thead>
<tbody id="table-data">
#foreach ($permissions as $permission)
tr tags
#endforeach
</tbody>
</table>
#endif
<div class="col-md-12">
{{ $paginator->links('sections.pagination') }}
</div>
then in controller method:
public function index(Request $request)
{
$permissions=Permission::paginate(5);
if($request->ajax()){
return view('sections.table',compact('permissions'));
}
return view('permission.index',compact('permissions'));
}
Why there is so much problems with this pagination from livewire? i have been see many topics of this.. and srsly i don't get it.. what wrong im doing? https://i.imgur.com/PENGFjf.gifv <- problem
if i go manualy and i write "?page=2" in url adress it is working, but i don't have any actions inside, clicking in pagination buttons
| "laravel/framework": "^8.54",
| "laravel/jetstream": "^2.3",
| "laravel/sanctum": "^2.6",
| "laravel/tinker": "^2.5",
| "livewire/livewire": "^2.5"
<?php
namespace App\Http\Livewire;
use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;
class ShopComponent extends Component
{
use WithPagination;
public function render()
{
return view('livewire.shop-component', ['products' => Product::paginate(9)])->layout('layouts.base');
}
public function paginationView()
{
return 'livewire.custom-pagination';
}
}
Custom pagination is copy from vendor - bootstrap pagination
<div>
#if ($paginator->hasPages())
<nav class="pagination justify-content-center">
<ul class="pagination mt-30 mb-30">
{{-- Previous Page Link --}}
#if ($paginator->onFirstPage())
<li class="page-item disabled" aria-disabled="true" aria-label="#lang('pagination.previous')">
<span class="page-link" aria-hidden="true">‹</span>
</li>
#else
<li class="page-item">
<button type="button" dusk="previousPage" class="page-link" wire:click="previousPage" wire:loading.attr="disabled" rel="prev" aria-label="#lang('pagination.previous')">‹</button>
</li>
#endif
{{-- Pagination Elements --}}
#foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
#if (is_string($element))
<li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
#endif
{{-- Array Of Links --}}
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li class="page-item active" wire:key="paginator-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
#else
<li class="page-item" wire:key="paginator-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }})">{{ $page }}</button></li>
#endif
#endforeach
#endif
#endforeach
{{-- Next Page Link --}}
#if ($paginator->hasMorePages())
<li class="page-item">
<button type="button" dusk="nextPage" class="page-link" wire:click="nextPage" wire:loading.attr="disabled" rel="next" aria-label="#lang('pagination.next')">›</button>
</li>
#else
<li class="page-item disabled" aria-disabled="true" aria-label="#lang('pagination.next')">
<span class="page-link" aria-hidden="true">›</span>
</li>
#endif
</ul>
</nav>
#endif
</div>
shop-component
https://i.imgur.com/bob483q.png
<div>
#foreach ($products as $product)
<div class="col-sm-6 col-lg-4 mb-30">
<div class="card product-card">
<div class="card-body">
<div class="product-thumbnail position-relative">
<span class="badge badge-danger top-right">New</span>
<a href="single-product.html">
<img class="first-img" src="{{ asset('assets/img/product/1.png') }}" alt="thumbnail" />
</a>
<!-- product links -->
<ul class="actions d-flex justify-content-center">
<li>
<a class="action" href="wishlist.html">
<span data-toggle="tooltip" data-placement="bottom" title="add to wishlist" class="icon-heart">
</span>
</a>
</li>
<li>
<a class="action" href="#" data-toggle="modal" data-target="#compare">
<span data-toggle="tooltip" data-placement="bottom" title="Add to compare" class="icon-shuffle"></span>
</a>
</li>
<li>
<a class="action" href="#" data-toggle="modal" data-target="#quick-view" >
<span data-toggle="tooltip" data-placement="bottom" title="Quick view" class="icon-magnifier"></span>
</a>
</li>
</ul>
</div>
<div class="product-desc py-0 px-0">
<h3 class="title">
{{ $product->name }}
</h3>
<div class="star-rating">
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star"></span>
<span class="ion-ios-star de-selected"></span>
</div>
<div class="d-flex align-items-center justify-content-between" >
<span class="product-price">{{ $product->regular_price }}</span>
<button class="pro-btn" data-toggle="modal" data-target="#add-to-cart" >
<i class="icon-basket"></i>
</button>
</div>
</div>
</div>
</div>
</div>
#endforeach
{{-- Paginacja produktów --}}
{{ $products->links() }}
</div>
php artisan livewire:publish --config
php artisan livewire:publish --assets
second , make sure to add this lines in the main template.
<head>
#livewireStyles
</head>
<body>
{{ $slot }}
#livewireScripts
</body>
I am trying to get a side menu from db using user permission. I successfully get the data but if it is empty i would like to delete the dropmenu:
#foreach ($t as $key=>$item)
#if($ci)
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle">
<span class="fa fa-dashboard"></span><span class="mtext">{{$item->designation}}</span>
</a>
#foreach ($item->links as $link)
#foreach($link->profil as $p)
#if(Auth::user()->name == $p->login)
#php $ci = 1; #endphp
<ul class="submenu">
<li>
{{$link->titre}}
</li>
</ul>
#else
#php $ci = 0; #endphp
#endif
#endforeach
#endforeach
</li>
#endif
#endforeach
details :
the variable item get all main dropmenus
the variable link get all link for each dropmenu
the variable p for checking permission
Please could help me to fix this issue which is delete the empty dropmenu where if statement condition not applied
I think your mean is :
#foreach ($t as $key=>$item)
#if($ci)
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle">
<span class="fa fa-dashboard"></span><span class="mtext">{{$item->designation}}
</span>
</a>
#foreach ($item->links as $link)
#if($item->links->count())
#foreach($link->profil as $p)
#if(Auth::user()->name == $p->login)
#php $ci = 1; #endphp
<ul class="submenu">
<li>
<a href="{{asset('/')}}{{$link->url}}">{{$link->titre}}
</a>
</li>
</ul>
#else
#php $ci = 0; #endphp
#endif
#endforeach
#endif
#endforeach
</li>
#endif
#endforeach
add a #if($links->count() for if count of links bigger of zero continue process
How to use Paginator Instance Methods, so I can design my pagination in Laravel 5.6 instead of default?
I tried to use this code dwon but I didn't understand the variable $elements and where did it came from:
#if ($paginator->hasPages())
<ul class="pagination">
{{-- Previous Page Link --}}
#if ($paginator->onFirstPage())
<li class="disabled"><span>«</span></li>
#else
<li>«</li>
#endif
{{-- Pagination Elements --}}
#foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
#if (is_string($element))
<li class="disabled"><span>{{ $element }}</span></li>
#endif
{{-- Array Of Links --}}
#if (is_array($element))
#foreach ($element as $page => $url)
#if ($page == $paginator->currentPage())
<li class="active"><span>{{ $page }}</span></li>
#else
<li>{{ $page }}</li>
#endif
#endforeach
#endif
#endforeach
{{-- Next Page Link --}}
#if ($paginator->hasMorePages())
<li>»</li>
#else
<li class="disabled"><span>»</span></li>
#endif
</ul>
#endif
Hi guys i have trouble in making different icon for url using laravel breadcrump, , here the picture
I want to make icon HRMS and Dashboard is different
Here my blade file
<link rel="stylesheet" type="text/css" href="{{ asset("/css/hrms2.css") }}">
#if (count($breadcrumbs))
<ol class="breadcrumb">
#foreach ($breadcrumbs as $breadcrumb)
#if ($breadcrumb->url && !$loop->last)
<li class="breadcrumb-item" style="">
<a class="bread-color" href="{{ $breadcrumb->url }}">
<i class="fa fa-home"></i> {{ $breadcrumb->title }}</a>
</li>
#else
<li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
#endif
#endforeach
</ol>
#endif
You need to pass icon name also in $breadcrumb object and use $breadcrumb->icon instead of fa-home
<ol class="breadcrumb">
#foreach ($breadcrumbs as $breadcrumb)
#if ($breadcrumb->url && !$loop->last)
<li class="breadcrumb-item" style=""><a class="bread-color" href="{{ $breadcrumb->url }}"> <i class="fa {{ $breadcrumb->icon }}"></i> {{ $breadcrumb->title }}</a></li>
#else
<li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
#endif
#endforeach