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 | 31 |
Tags
- Machine Learning
- docker
- mariadb
- CentOS
- SQL
- For
- Switch
- Backbone.js
- python
- rabbitmq
- 블레이드 템플릿
- Redux
- webpack
- Go
- Redis
- 기초 수학
- laravel
- nodejs
- deep learning
- Babel
- phpredis
- linux
- Node
- NCP
- javascript
- fastapi
- React
- php
- nginx
- AWS
Archives
- Today
- Total
개발일기
Laravel - 비동기 페이지네이션 본문
728x90
반응형
Laravel에서 Ajax를 통하여 새 페이지로의 로딩 없이 페이징 처리를 하고자 하는 경우가 종종 발생한다. 이경우 laravel의 pagination을 사용하여 간단하게 기능을 구현할 수 있다.
pagination의 사용법은 이전 포스팅을 참조하면 된다.
https://phsun102.tistory.com/102
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/
https://laravel.com/docs/8.x/pagination
728x90
반응형
'프로그래밍 언어 > PHP - Laravel' 카테고리의 다른 글
Laravel - slug url 생성 (0) | 2022.08.20 |
---|---|
Laravel - Schedule 예약 작업 실행 (0) | 2022.08.13 |
Laravel - Pagination 사용법 (0) | 2022.07.23 |
Laravel - Laravel Mix 사용법 (0) | 2022.07.23 |
Laravel - Syntax error or access violation: 1055 Error (0) | 2022.07.18 |
Comments