infinite scroll django에서 사용해보기

모든 데이터를 한번에 가져오기 보다는 pagination을 사용하여 깔끔하게 구현하는 것이 좋다.

하지만 이번에는 번호로 지정된 pagination보다는 스크롤 하면 데이터를 받아오는 방식을 사용해보고싶다는 생각이 들었다.

 

따라서 구글링해본 결과 여러가지 방법이 있었지만 이미 만들어진 것을 사용해보려고 한다. 

먼저 아래에 접속한 뒤 다운로드를 하고, jquery.waypoint.min.js와 infinite.min.js파일만 우리 서버의 static/js로 가져온다.

Waypoints (imakewebthings.com)

Waypoints

 

 

그리고 django 에서 static을 사용하기 위해선 먼저 settings.js에서 static폴더를 아래와 같이 지정해주어야 한다.

STATIC_URL = "/static/"
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

이렇게 되면 기본 준비가 되었다. 사용하기 위한 html에가서 우리가 받아온 js파일들을 import 해주어야한다.

두가지 방식이 있다. static을 포함한 경로를 적어주는 방식과 settings에서 저장해놓은 static을 불러오는 방식이다.

아래의 방법을 사용하려면 맨 위에 {% load static %}을 선언해주어야 한다.

 

그리고 for문을 감싸는 div안에 infinite-container를 넣어두고 그 아래에 각각의 item에는 infinite-item을 넣어두자

그리고 아래에는 이걸 적어주어야 한다. 

실제로 우리가 직접 a태그를 눌러 이동하는 것이 아니라 if문을 생략해도 될 것 같지만 생략하면 오류가 발생한다.

if문을 통해서 a태그를 만들어 주냐 마냐가 중요한 것 같다. jquery가 알아서 next a 태그가 있다면 스크롤 할 때 마다 자동으로 눌러서 불러와주기 때문이다. 

 

불러와서 자동으로 infinite-container 밑에 infinite-item을 추가해준다.

 

 

그리고 가장 중요한 것이 infinite를 설정하는 것이다. 아래와 같이 설정해주면 이제 작동을 잘한다.

여기서 page를 불러오기 전, 불러온 후에 동작하는 함수에 스피너 같은 걸 넣어주고 show() hide()를 해주면 멋지게 동작하는 것을 볼 수 있다.

이렇게 간단하게 infinite scroll을 만들어 보았다.