250x250
반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Ai
- miniconda
- NextJS
- chatGPT
- git
- React
- nft
- PM2
- Python
- Remix
- threejs
- nginx
- jquery
- exceljs
- nodejs
- 배포
- polygon
- CSS
- pagination
- 블록체인
- node
- metamask
- 발행
- Laravel
- netfunnel
- Setting
- Kaikas
- 라라벨
- 공연티켓
- 회고
Archives
- Today
- Total
박주니 개발 정리
라라벨 pagination을 의도한대로 만들고 싶다면? 본문
728x90
반응형
바로 본론으로 들어가서 라라벨 paginate는 직접 조작할 수가 없습니다. 그럼 links()을 거치는 것이 아니라 ajax으로 직접 데이터를 받아서 아예 A-Z까지 사용해야하는 것인데 그럼 라라벨로 프론트를 구성할 때 비효율적이기 때문입니다.
혹시 라라벨 paginate()을 활용해서 links()을 사용할 때 정해진 1-10까지 나오고 다음을 누르면 11-20 이렇게 나오게 하는 방법을 아시는 분은 알려주시면 감사하겠습니다. 저는 자바스크립트 및 react로 a-z까지 페이지네이션을 클라이언트가 요구한대로 만들어본 적은 있는데 라라벨은 공식 문서 및 전문가에게 물어봐도 알수가 없었습니다.
- 'Pagination을 제대로 적용했는데 안된다면' 파트를 다 이행하셨다는 전제하에\Providers\AppServiceProvider.php로 접속해주시길 바랍니다.
- Paginator을 연결하고 useBootstrap()을 실행시킵니다.
<?php namespace App\Providers; use Illuminate\Support\ServiceProvider; use Illuminate\Pagination\Paginator; class AppServiceProvider extends ServiceProvider { /** * Register any application services. * * @return void */ public function register() { // } /** * Bootstrap any application services. * * @return void */ public function boot() { Paginator::useBootstrap(); } }
- useBootstrap()을 사용하면 해당 pagination을 bootstrap pagination css을 적용시킵니다.
3. 해당 url로 들어가서 pagination이 어떻게 bootstrap css가 사용되었는 지 확인합니다.
주의사항)
web에서 진행할 때에는 10페이지를 초과했을 때 하단에 이미지처럼 ... 하고 마지막-1, 마지막페이지가 나오는 것을 볼 수 있습니다. 그런데 여기서 css로 ul.pagination을 width 및 margin, padding으로 간격을 조정할 수가 없기 때문에 크기를 줄여서 의도한 페이지네이션을 만들 수 없습니다.
추가 진행했던 방법)
@if ($paginator->hasPages())
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="disabled"><span>«</span></li>
@else
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a></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><a href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">»</a></li>
@else
<li class="disabled"><span>»</span></li>
@endif
</ul>
@endif
라라벨 수동 페이지네이션을 적용해서 links()로 불러서 진행을 했지만 이 방법은 그저 controller에 적용할 paginate()와 동일한 역할이라는 것을 알게 되었고 조작을 하기에는 이미 존재하는 도구를 사용한 것이라 한계가 있었습니다.
728x90
반응형
Comments