This is my issue I'm migrating an existing inhouse app to Laravel, the page I'm working on lists clients, I'm using bootstrap to render the pagination section and using {{ $clients->onEachSide(5)->links }} what i now wish to do and I'm at a loss on how to even begin is to add some buttons to the left of the pagination to filter the table. The rendered code for the code above is as follows:
<nav>
<ul class="pagination">
<li class="page-item disabled" aria-disabled="true" aria-label="« Previous"><span class="page-link" aria-hidden="true">‹</span></li>
<li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=2">2</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=3">3</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=4">4</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=5">5</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=6">6</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=2" rel="next" aria-label="Next »">›</a></li>
</ul>
</nav>
So I guess what I'm trying to do is add some content after the ul but within the nav. Is this possible? if not how should this be done?
thanks
Craig
Open your pagination file then add class to nav tag
<nav class="row">
like this:
<nav class="row">
<ul class="pagination">
<li class="page-item disabled" aria-disabled="true" aria-label="« Previous"><span class="page-link" aria-hidden="true">‹</span></li>
<li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=2">2</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=3">3</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=4">4</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=5">5</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=6">6</a></li>
<li class="page-item"><a class="page-link" href="http://site.ecl/index.php/accounts?page=2" rel="next" aria-label="Next »">›</a></li>
</ul>
<ul class="pagination">
<li class="page-item"><a class="btn btn-primary" href="#">EXAMPLE</a></li>
</ul>
</nav>
Related
My question is: how can I give mm-active class to the sidebar navigation on click event? (mm-active is class of jQuery metisMenu). The mm-active class must be at li tag, not on second level menu.
This is my sidebar navigation HTML structure which is inside of include folder.
<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
<div class="position-sticky sidebar-scroll">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
<span>Menu</span>
</h6>
<ul class="nav flex-column" id="metismenu">
<li class="nav-item mm-active">
<a class="nav-link" href="#" aria-expanded="true">
<span data-feather="home"></span>
<span class="category-name">Dashboard</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level" aria-expanded="true">
<li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" aria-expanded="true">
<span data-feather="settings"></span>
<span class="category-name">E-Commerce</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level mm-collapse" aria-expanded="true">
<li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
If it is in blade you can mix in some php like this:
<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
<div class="position-sticky sidebar-scroll">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
<span>Menu</span>
</h6>
<ul class="nav flex-column" id="metismenu">
#php
$activeDashboard = [
'home',
'dashboard-demographic',
'dashboard-project',
'dashboard-hospital',
'dashboard-hrm',
'dashboard-real-estate',
];
$isDashboard = Request::is($activeDashboard);
#endphp
<li class="nav-item {{ $isDashboard ? 'mm-active' : null }}">
<a class="nav-link" href="#" aria-expanded="{{ $isDashboard ? true : false }}">
<span data-feather="home"></span>
<span class="category-name">Dashboard</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level" aria-expanded="{{ $isDashboard ? true : false }}">
<li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
</ul>
</li>
#php
$activeEcommerce = [
'ecommerce-dashboard',
'ecommerce-products',
'ecommerce-product-detail',
'ecommerce-add-product',
'ecommerce-orders',
'ecommerce-cart',
'ecommerce-checkout',
];
$isEcommerce = Request::is($activeEcommerce);
#endphp
<li class="nav-item {{ $isEcommerce ? 'mm-active' : null }}">
<a class="nav-link" href="#" aria-expanded="{{ $isEcommerce ? true : false }}">
<span data-feather="settings"></span>
<span class="category-name">E-Commerce</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level mm-collapse" aria-expanded="{{ $isEcommerce ? true : false }}">
<li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
If I define my block on the li tag, TBS only shows the first item in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="file" href="/logs/#[logs.key; block=li]">[logs.key]</a></li>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
If I define the block on the a tag, it shows all the items in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<a class="file" href="/logs/#[logs.key; block=a]">[logs.key]</a>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
What am I doing wrong here?
I hava a dynamic menu using VueJs and Laravel. It works fine.
But when I display one of them, all options are displayed.
The menu starts in foreach loop to check menu and assigned options.
Is there any way to restrict this?
My code is the next:
File sidebar.blade.php
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li #click="menu=0" class="nav-item">
<a class="nav-link active" href="#"><i class="icon-speedometer"></i> Escritorio</a>
</li>
<li class="nav-title">
Menú de opciones
</li>
<li class="nav-item nav-dropdown">
#foreach($menus as $menu)
<a class="nav-link nav-dropdown-toggle" href="#"><i class="{{ $menu->icono_menu }}"></i>{{ $menu->nombre }}</a>
#foreach($permisos as $permiso)
#if($menu->id==$permiso->idmenu)
<ul class="nav-dropdown-items">
<li #click="menu={{ $permiso->codigo }}" class="nav-item">
<a class="nav-link" href="#"><i class="{{ $permiso->icono_opcion }}"></i> {{ $permiso->nombre }}</a>
</li>
</ul>
#endif
#endforeach
#endforeach
</li>
<li #click="menu=27" class="nav-item">
<a class="nav-link" href="#"><i class="icon-book-open"></i> Ayuda <span class="badge badge-danger">PDF</span></a>
</li>
<li #click="menu=28" class="nav-item">
<a class="nav-link" href="#"><i class="icon-info"></i> Acerca de...<span class="badge badge-info">IT</span></a>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
I want to create multiple pagination in one page, info pagination is working perfectly. but
berita pagination is linked to info and always showing info page instead of berita page.
Controller
$infos = Info::paginate(4, ['*'], 'info');
$beritas = Berita::paginate(4, ['*'], 'berita');
View
{{$infos->appends(['info' => $infos->currentPage()])->links()}}
{{$beritas->appends(['berita' => $beritas->currentPage()])->links()}}
EDITED
Info
<ul class="pagination">
<li class="page-item disabled" aria-disabled="true" aria-label="« Sebelumnya">
<span class="page-link" aria-hidden="true">‹</span>
</li>
<li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
<li class="page-item"><a class="page-link" href="http://127.0.0.1:8000?info=2">2</a></li>
<li class="page-item">
<a class="page-link" href="http://127.0.0.1:8000?info=2" rel="next" aria-label="Berikutnya »">›</a>
</li>
</ul>
Berita
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="http://127.0.0.1:8000?berita=1" rel="prev" aria-label="« Sebelumnya">‹</a>
</li>
<li class="page-item"><a class="page-link" href="http://127.0.0.1:8000?berita=1">1</a></li>
<li class="page-item active" aria-current="page"><span class="page-link">2</span></li>
<li class="page-item disabled" aria-disabled="true" aria-label="Berikutnya »">
<span class="page-link" aria-hidden="true">›</span>
</li>
</ul>
EDITED
Now it works, but it always show one info data inside berita pagination.
This should be possible as long as you keep track of the page value for the opposite set:
{{$infos->appends(['info' => $infos->currentPage(), 'berita' => $beritas->currentPage()])->links()}}
{{$beritas->appends(['berita' => $beritas->currentPage(), 'info' => $infos->currentPage()])->links()}}
I'll try and test this theory out later if I find time.
I have the top-bar nav all setup and the dropdowns are displaying as expected. However, when I click on a dropdown link, the dropdown just disappears. The page does not advance to the URI as expected.
I'm stumped...
<section class="top-bar-section second-row">
<ul>
<li class="active"><i class="fa fa-exclamation-triangle"></i><span> Alert Central</span></li>
<li class="has-dropdown">
<i class="fa fa-bar-chart"></i><span> Analytics</span>
<ul class="dropdown">
<li>System Status</li>
<li>My Use</li>
<li>My User's Use</li>
<li>Account Information</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-magic"></i><span> Filter Management</span>
<ul class="dropdown">
<li>Keywords</li>
<li>Categories</li>
<li>Locations</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-users"></i><span> User Management</span>
<ul class="dropdown">
<li>Users</li>
<li>Roles</li>
</ul>
</li>
</ul>
</section>
Did you try to add data-topbar in <section> tag ?
<section data-topbar class="top-bar-section second-row">