Laravel 라라벨 커스텀 페이지네이션 만들기

1단계: 페이지 매김 템플릿 만들기

laravel 사용자 지정 페이지 매김 템플릿을 사용할 것이므로 아래 명령을 실행하여 가져옵니다.

php artisan vendor:publish --tag=laravel-pagination

 

위의 명령 실행을 실행하면 보기 파일(resources/views/vendor)에 새 폴더 "페이지 매김"이 표시됩니다. 페이지 매김 폴더에는 기본적으로 다음 파일이 있습니다.

• default.blade.php
• 부트스트랩-4.blade.php
• 단순 부트 스트랩 4.blade.php
• 단순-default.blade.php
• semantic-ui.blade.php 

 

그러나 우리는 우리 자신의 사용자 정의 페이지 매김 템플릿을 사용할 것입니다. 우리는 위의 템플릿을 사용하지 않습니다. 

 

 

2단계: 경로 추가

이제 페이지 매김 페이지를 보려면 경로가 필요합니다. 따라서 아래 경로를 만들고 사용자의 더미 데이터를 만듭니다.

Route::get('/', 'TestController@index');

 

더 읽어보기:   다음 및 이전 버튼이 있는 Laravel 7.x Ajax 페이지 매김

 

 

3단계: 컨트롤러 추가 

이제 TestController에 새로운 컨트롤러 메서드 "index()"를 추가해야 합니다. 따라서 TestController를 생성하지 않은 경우 생성하고 다음 코드를 붙여넣을 수 있습니다.

App/Http/Controller/TestController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{
    public function index()
    {
    	$users = \App\User::paginate(7);
    	
        return view('welcome',compact('users'));
    }
}

 

4단계: 블레이드 파일 생성 

이제 사용자 보기 및 사용자 지정 페이지 매김 템플릿에 대한 블레이드 파일을 만들어야 합니다. 따라서 다음 경로로 생성합니다.

resources/views/vendor/pagination/custom.blade.php

@if ($paginator->hasPages())
    <ul class="pager">
       
        @if ($paginator->onFirstPage())
            <li class="disabled"><span>← Previous</span></li>
        @else
            <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">← Previous</a></li>
        @endif


      
        @foreach ($elements as $element)
           
            @if (is_string($element))
                <li class="disabled"><span>{{ $element }}</span></li>
            @endif


           
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li class="active my-active"><span>{{ $page }}</span></li>
                    @else
                        <li><a href="{{ $url }}">{{ $page }}</a></li>
                    @endif
                @endforeach
            @endif
        @endforeach


        
        @if ($paginator->hasMorePages())
            <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">Next →</a></li>
        @else
            <li class="disabled"><span>Next →</span></li>
        @endif
    </ul>
@endif

 

더 읽어보기: Laravel 7.x Infinite Scroll (더 로드) 예제 튜토리얼 

 

마지막으로 welcome.blade.php 파일을 생성해야 하며 사용자 지정 페이지 매김 템플릿을 사용할 것입니다. 그럼 웰컴 페이지를 만들고 그 위에 벨로우즈 코드를 넣어봅시다.

resources/views/welcome.blade.php

@extends('layouts.app')
@push('style')
	<style type="text/css">
		.my-active span{
			background-color: #5cb85c !important;
			color: white !important;
			border-color: #5cb85c !important;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
@endpush
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                
                  <table class="table table-stripped">
                  	<thead>
                  		<tr>
                  			<th>No</th>
                  			<th>Name</th>
                  			<th>Email</th>
                  		</tr>
                  	</thead>
                  	<tbody>
                  		@forelse($users as $user)
                  		<tr>
                  			<td>{{ $loop->index + 1 }}</td>
                  			<td>{{ $user->name }}</td>
                  			<td>{{ $user->email }}</td>
                  		</tr>
                  		@empty
                  		<p>No user found!</p>
                  		@endforelse
                  	</tbody>
                  </table>
               {{ $users->links('vendor.pagination.custom') }}
            </div>
        </div>
    </div>
</div>
@endsection

 

더 읽어보기:  Vue Js를 사용한 Laravel 7.x 페이지 매김 예제

 

이 laravel 사용자 지정 페이지 매김 튜토리얼이 도움이 되기를 바랍니다.