Level 63
It should work, do you have any error message ?
Jul 17, 2022
15
Level 32
links() pagination in Livewire doesn't work
the data and everything work okay but when use links function to pagination doesn't work
in main view :
@extends('layout',['html_tag_data'=>$html_tag_data, 'title'=>$title, 'description'=>$description])
@section('css')
@livewireStyles
@endsection
@section('content')
<div class="container">
<!-- List Items Start -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-xl-3 g-2">
@livewire('admin.all-pages')
</div>
<!-- List Items End -->
</div>
@endsection
@section('js_vendor')
<script src="{{asset('js/cs/scrollspy.js')}}"></script>
@endsection
@section('js_page')
@livewireScripts
@endsection
in admin.all-pages :
@if(! $pages->isEmpty())
@foreach($pages as $page)
<div class="col">
<div class="card h-100 {{$page->page_status ? 'border-success' : 'border-danger'}}">
<div class="card-body row gx-4">
<div class="col-auto">
<i data-acorn-icon="notebook-1" class="icon text-primary" data-acorn-size="18"></i>
</div>
<div class="col">
<a href="{{url('admin/page/'.$page->page_slug)}}" class="heading stretched-link d-block">{{$page->page_name}}</a>
<div class="text-muted">{{$page->page_description}}</div>
</div>
</div>
</div>
</div>
@endforeach
{{ $pages->links() }}
@endif
All pages Component
class AllPages extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render()
{
return view('livewire.admin.all-pages',[
'pages' => Page::paginate(6)
]);
}
}
Level 32
no I don't have any error message and console is clean no errors but the pagination button doesn't work @vincent15000
1 like
Level 63
@enadabuzaid Oh I didn't notice that : ->links() works fine, but it's the click on the button that doesn't work. That's totally different ;).
How many records do you have in the database ? If you have equal or less than 6, it's normal that the pagination links do not work.
Level 32
@vincent15000 yes it's work for example when add more row in database the number of page increase but when click on any one didn't work
- I have more than 6
1 like
Level 63
Try to remove this line and tell me it works better.
protected $paginationTheme = 'bootstrap';
Level 32
@vincent15000 also I tried it the same issue when click any number doesn't work :)
1 like
Level 63
@enadabuzaid Can you write this in your livewire controller.
class AllPages extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render()
{
$pages = Page::paginate(6);
dd($pages);
return view('livewire.admin.all-pages', compact('pages'));
}
}
What do you obtain with the dd ?
Level 32
Illuminate\Pagination\LengthAwarePaginator {#1247 ▼
#items: Illuminate\Database\Eloquent\Collection {#1459 ▶}
#perPage: 6
#currentPage: 1
#path: "http://127.0.0.1:8000/admin/page/all"
#query: []
#fragment: null
#pageName: "page"
+onEachSide: 3
#options: array:2 [▼
"path" => "http://127.0.0.1:8000/admin/page/all"
"pageName" => "page"
]
#total: 28
#lastPage: 5
}
1 like
Level 63
@enadabuzaid Can you show your base layout template ?
Level 32
@vincent15000 yes sure <3 , I'm just learning and this dashboard from envato I bought it
this is Layout
<!DOCTYPE html>
<html lang="en" data-url-prefix="/" data-footer="true"
@isset($html_tag_data)
@foreach ($html_tag_data as $key=> $value) data-{{$key}}='{{$value}}' @endforeach
@endisset
>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>Acorn Admin Template | {{$title}}</title>
<meta name="description" content="{{$description}}"/>
@include('_layout.head')
</head>
<body>
<div id="root">
<div id="nav" class="nav-container d-flex" @isset($custom_nav_data) @foreach ($custom_nav_data as $key=> $value)
data-{{$key}}="{{$value}}"
@endforeach
@endisset
>
@include('_layout.nav')
</div>
<main>
@yield('content')
</main>
@include('_layout.footer')
</div>
@include('_layout.modal_settings')
@include('_layout.modal_search')
@include('_layout.scripts')
</body>
</html>
and this scripts file where use yield('js_script')
<!-- Vendor Scripts Start -->
<script src="/js/vendor/jquery-3.5.1.min.js"></script>
<script src="/js/vendor/bootstrap.bundle.min.js"></script>
<script src="/js/vendor/OverlayScrollbars.min.js"></script>
<script src="/js/vendor/autoComplete.min.js"></script>
<script src="/js/vendor/clamp.min.js"></script>
<script src="/icon/acorn-icons.js"></script>
<script src="/icon/acorn-icons-interface.js"></script>
@yield('js_vendor')
<!-- Vendor Scripts End -->
<!-- Template Base Scripts Start -->
<script src="/js/base/helpers.js"></script>
<script src="/js/base/globals.js"></script>
<script src="/js/base/nav.js"></script>
<script src="/js/base/search.js"></script>
<script src="/js/base/settings.js"></script>
<!-- Template Base Scripts End -->
<!-- Page Specific Scripts Start -->
@yield('js_page')
<script src="/js/common.js"></script>
<script src="/js/scripts.js"></script>
<!-- Page Specific Scripts End -->
and this head where use yield('css')
<!-- Favicon Tags Start -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/img/favicon/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/favicon/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/favicon/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/favicon/apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/img/favicon/apple-touch-icon-60x60.png"/>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/img/favicon/apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/img/favicon/apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/img/favicon/apple-touch-icon-152x152.png"/>
<link rel="icon" type="image/png" href="/img/favicon/favicon-196x196.png" sizes="196x196"/>
<link rel="icon" type="image/png" href="/img/favicon/favicon-96x96.png" sizes="96x96"/>
<link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16"/>
<link rel="icon" type="image/png" href="/img/favicon/favicon-128.png" sizes="128x128"/>
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-TileImage" content="/img/favicon/mstile-144x144.png"/>
<meta name="msapplication-square70x70logo" content="/img/favicon/mstile-70x70.png"/>
<meta name="msapplication-square150x150logo" content="/img/favicon/mstile-150x150.png"/>
<meta name="msapplication-wide310x150logo" content="/img/favicon/mstile-310x150.png"/>
<meta name="msapplication-square310x310logo" content="/img/favicon/mstile-310x310.png"/>
<!-- Favicon Tags End -->
<!-- Font Tags Start -->
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="/font/CS-Interface/style.css"/>
<!-- Font Tags End -->
<!-- Vendor Styles Start -->
<link rel="stylesheet" href="/css/vendor/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/vendor/OverlayScrollbars.min.css"/>
@yield('css')
<!-- Vendor Styles End -->
<!-- Template Base Styles Start -->
<link rel="stylesheet" href="/css/styles.css"/>
<link rel="stylesheet" href="/css/main.css"/>
<!-- Template Base Styles End -->
<script src="/js/base/loader.js"></script>
1 like
Level 63
@enadabuzaid Can you open your devtools and check in the network datas if the page reloads when you click on a navigation link ?
Level 122
Do you have a SINGLE root dom element on the component view.
If your admin.all-pages shown above is accurate then , NO, you do not.
1 like
Level 63
Level 32
sorry but you can explain more about root , this is my first component on livelier
Level 122
@enadabuzaid https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues
Wrap your view in a <div>
1 like
Please or to participate in this conversation.