Laravel - 비동기 페이지네이션

 

Laravel에서 Ajax를 통하여 새 페이지로의 로딩 없이 페이징 처리를 하고자 하는 경우가 종종 발생한다. 이경우 laravel의 pagination을 사용하여 간단하게 기능을 구현할 수 있다.

 

pagination의 사용법은 이전 포스팅을 참조하면 된다.

https://phsun102.tistory.com/102

Laravel - Pagination 사용법

---

1. 데이터 불러오기

$bbs = BBS::where('title', 'LIKE', '%음료수%')->orderBy('id', 'ASC')->paginate(15);

 

2. view 데이터 생성

$response['bbsPagination'] = $bbs->appends(request()->except('pages'))->links()->render();

• appends() : appends를 추가하면 페이징이 생성될 때, URL 파라미터도 추가된 상태로 페이지가 생성된다.
• except() : except부분은 제외하고자 하는 URL 파라미터명을 지정하여 제외할 수 있다.
• links() : 페이징 처리된 html 코드가 생성된다.
• render() : links()생성된 html 코드를 원본 상태로 만들어준다. 즉, string형식으로 <div><p>... </p></div>로 만들어주는 것을 뜻한다.

 

3. return하기

return $response;

라라벨에서 뷰를 렌더링 하기 위해서는 view()를 사용하였다. 하지만 비동기 통신을 활용하여 html태그를 append할 예정이기 때문에 view()로 반환하는 것이 아니라 원본 html 코드가 담긴 변수를 반환한다.

 

4. Ajax에서 append하기

success: function(res) {
  const pagination = res.bbsPagination; // 페이징 결과를 변수에 담는다.
  
  // class명이 bbs-pagination인 태그에 페이징 결과를 삽입한다.
  $(".bbs-pagination").children().remove(); // 하위 태그 삭제
  $(".bbs-pagination").append(pagination); // 페이징 결과 append
}

Ajax의 success 부분에서 페이징 결과를 처리한다.

반환된 $response 변수의 bbsPagination을 pagination이라는 변수에 담는다. 그 후, 페이징 결과를 렌더링 하고자 하는 태그의 하위 태그를 삭제한 후, append를 사용하여 해당 태그의 마지막에 html요소를 추가한다.

 

---

참고 사이트 : 

https://readerstacks.com/laravel-ajax-pagination-example-with-search/

Laravel Ajax pagination with search

 

https://laravel.com/docs/8.x/pagination

Laravel - The PHP Framework For Web Artisans