페이지네이션과 로드 모어(Load More)를 동시 구현해보자

테이블 리스트 형식

테이블 아래에 보이는 페이징

페이지네이션과 로드 모어의 동시 구현?

page 변수를 이용한 더보기 기능 구현

선행 작업: 페이지네이션 구현

$posts = Post::orderByDesc('created_at')->paginate()->appends($request->input());Copy

<div class="wrap_pagination">
    {{ $posts->onEachSide(2)->links() }}
</div>Copy

백단 코드

public function index(Request $request)
{
    $posts = Post::query();
    $keyword = $request->input('keyword');

    if($keyword != null) {
        $posts = $posts->where('title', 'LIKE', "%{$keyword}%");
    }

    $posts = $posts->orderByDesc('created_at')->paginate()->appends($request->input());

    return view('admin.post.index', compact('posts'));
}

public function indexLoad(Request $request)
{
    try {
        $page = $request->input('page', 1);
        $perPage = $this->perPage;
        $total = Post::count();

        // 요청된 페이지 번호가 유효한지 검증
        $maxPages = ceil($total / $perPage);
        if ($page > $maxPages) {
            return response()->json(['message' => 'No more data', 'lastPage' => true], 404);
        }

        $posts = Post::orderBy('created_at', 'desc')->paginate($perPage, ['*'], 'page', $page);
        $isLastPage = $page >= $maxPages;

        return response()->json([
            'html' => view('admin.post._rows', compact('posts'))->render(),
            'lastPage' => $isLastPage
        ]);
    } catch (\Exception $e) {
        return response()->json(['message' => $e->getMessage()], 500);
    }
}Copy

앞단 코드

<div class="wrap_pagination">
    <button id="btnLoad" class="btn btn_load mr-3" onclick="loadData()">Read More</button>
    {{ $posts->onEachSide(2)->links() }}
</div>

<script>
    let currentPage = '{{ request('page', 1) }}';
    async function loadData() {
        currentPage++;
        const btnLoad = document.getElementById('btnLoad');
        btnLoad.disabled = true;

        try {
            const response = await fetch(`/post/load?page=${currentPage}`);
            if (!response.ok) {
                if (response.status === 404) {
                    btnLoad.style.display = 'none';
                } else {
                    console.error('Error loading data:', response.statusText);
                    btnLoad.disabled = false;
                }
                return;
            }

            const data = await response.json();
            if (data.html.trim() !== '') {
                document.getElementById('listPost').insertAdjacentHTML('beforeend', data.html);
                if (data.lastPage) {
                    btnLoad.style.display = 'none';
                } else {
                    btnLoad.disabled = false;
                }
            } else {
                btnLoad.style.display = 'none';
            }
        } catch (error) {
            console.error('Error loading data:', error);
            btnLoad.disabled = false;
        }
    }
</script>Copy

작동 예시

결론

에디터 파일 관리를 위해 만든 카드 리스트에서 이 기능이 필요해졌다.