개발
Laravel 6.x

라라벨에서 한 화면에 2개의 페이징 붙이는 법

47 views as of November 25, 2024.

라라벨 페이지네이션

라라벨에는 페이지네이션이라는 강력한 기능이있다.

개발자가 별도로 페이지네이션의 복잡한 구도를 이용하지않아도 쉽게 페이지네이션 백단 모델과 앞단 랜더링을 지원한다.

사용하는 방법도 엄청 간단하다.
백단 컨트롤러에서 아래와 같이 선언해주고

use App\Models\User;

class UserController extends Controller
{
    public function index()
    {
        // 10개씩 페이징
        $users = User::paginate(10);

        // 또는 simplePaginate 사용 (이전/다음 버튼만)
        // $users = User::simplePaginate(10);

        return view('users.index', compact('users'));
    }
}Copy


앞단에서 아래와 같이 랜더링하면된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Users</title>
</head>
<body>
    <h1>User List</h1>

    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <!-- 페이지네이션 링크 출력 -->
    {{ $users->links() }}

</body>
</html>Copy


그러면 아래와 같이 화면에 랜더링 되고



이런 HTML 코드가 자동으로 생성이 된다.


이런 라라벨의 페이지네이션은 아래 개발문서에서 여러가지 옵션을 사용해서 필요에 맞게 이용할 수 있다.

Laravel - The PHP Framework For Web Artisans
Laravel - The PHP Framework For Web Artisans
Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.
https://laravel.com/docs/6.x/pagination




한 화면에 페이지네이션이 2개가 필요할땐?

문제는 사용하다보니가 경우에 따라 한 화면에 페이지네이션이 2개가 필요했던 것이다.

문제 발생

쉽게 생각하면 그냥 백단에서 ->pagination() 을 필요한 모델에 2번 선언하면 끝일것이다.
근데 문제는 앞단에서 발생했다.


실제로 페이지네이션은 get 변수에 page=? 라는 변수 제어를 통해 백단 컨트롤러와 함께 모델 쿼리를 구간별로 요청해서 새로 뷰를 다시 그려주는 기능인데, 이 변수가 기본적으로 page 로 고정이 되어있다.

그러다보니까 내가 만약에 2개의 모델 결과에 페이지네이션을 둘다 써버리면 첫번째 페이징 버튼도 page 변수를 쓰고 두번째 페이징 버튼도 page 변수를 쓰니까 페이징이 2개 동시에 적용되어 원하는 방식의 사용이 불가능했다.


해결방안

같은 페이징용 변수를 사용한다하면 이 페이징 변수를 뒤틀어주면 그만인 내용이다.

백단에서 페이지네이션을 사용할때 아래와 같이 페이징 변수를 지정해주는것이 가능하다.

use App\Models\FirstModel;
use App\Models\SecondModel;

public function index()
{
    // 첫 번째 페이지네이션
    $firstItems = FirstModel::paginate(10, ['*'], 'firstPage');

    // 두 번째 페이지네이션
    $secondItems = SecondModel::paginate(5, ['*'], 'secondPage');

    return view('your-view', compact('firstItems', 'secondItems'));
}Copy


그리고 앞단에서는 그냥 기존에 썻던거처럼 평범하게 페이지네이션을 ->links() 메소드로 호출하면 된다.

<div>
    <h3>First Pagination</h3>
    @foreach ($firstItems as $item)
        <p>{{ $item->name }}</p>
    @endforeach
    {{ $firstItems->links() }}
</div>

<div>
    <h3>Second Pagination</h3>
    @foreach ($secondItems as $item)
        <p>{{ $item->title }}</p>
    @endforeach
    {{ $secondItems->links() }}
</div>Copy


이러면 페이징 버튼의 변수처리가 컨트롤러에서 주어진 firstPage, secondPage 로 지정되어 변수명이 다른 페이징 관리가 가능해서 문제없이 한 화면에 2개의 페이징 기능을 넣는 것이 가능하다.

나는 postPages와 commentPage 2개로 나누어서 사용해보았다.



페이지 뷰파일도 다르게 적용 가능

2개의 페이징 관리가 이루어진다는 이야기는 서로다른 페이징 뷰를 랜더링하는 경우도 있을 것이다.

우선 라라벨에서 내가 원하는 페이징 뷰를 선택하기위해서 vendor에서 페이징 뷰 파일을 본 프로젝트에 꺼내오는 작업부터 수행한다. (물론 처음부터 새로만들거나 이미 있다면 패스)

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

위 코드는 vendor에 보관되어있는 페이징 뷰파일을 프로젝트 resource 파일로 옮겨주는 명령어이다.

이코드를 실행하면 프로젝트 폴더의 resources/vendor/pagination 폴더에 미리정의되어있는 페이지네이션용 뷰 파일이 생성이된다.


여기서 필요에 맞게 기존 파일을 변경하거나 기존파일 구조를 바탕으로 새로운 뷰파일을 만들면 내가 원하는 페이징 코드를 랜더링 할 수 있다.


{{ $secondItems->links('vendor.pagination.new-pagination') }}Copy

내가 새로 new-pagination.blade.php 파일을 만들었다면 위와같이 페이지네이션 랜더링을 할때 뷰파일을 지정할 수 있다.

laravel/ui 로 bootstrap4 를 사용하도록 설정이되어있다면 기본 페이징 파일은 bootstrap-4.blade.php 이고, 그렇지 않다면 기본 페이징파일은 default.blade.php이다.

simple-xxx.blade.php 파일은 백단에서 페이지네이션 호출을 아래와 같이 했을때 사용되는 뷰 파일이다.

$secondItems = SecondModel::simplePaginate(5, ['*'], 'secondPage');Copy



결론

라라벨은 웹 페이지 구축에 있어서 정말 개발자가 원래 직접 개발해야할 것을 미리 만들어두고 쉽게 응용, 개선해서 쓸 수 있게 만든 좋은 프레임워크라고 생각한다.

페이징도 복잡하다면 엄청 복잡하고 잘못된 페이징 계산을 원래라면 다 보정해줘야하는데, 그걸 메소드 한번 호출로 쉽게 구현했으니까 말이다.

#개발 #라라벨 #laravel #페이징 #2개 #pagination
0 개의 댓글
×