코딩짜는 일상

[Alpine JS] 간단한 리스트 페이징 만들기 본문

IT/AlpineJS

[Alpine JS] 간단한 리스트 페이징 만들기

Remily 2022. 10. 28. 12:55
반응형

알파인 JS가 심플해서 마음에 든 김에 좀 살펴보다가
근래 리스트 페이징 만들 때 고생했던 게 떠올라 만들어 봤습니다.

 

인터넷에 검색하면 전부 ajax로 불러와서 <li>들을 치환하라고 하는데
당시 조금 급하게 완성해야해서 머리도 안 돌아가고 당황했던 기억이...ㅜㅠ

 

 

아주 단촐한..

각설하고 컨셉은~
예제중 가장 첫번째인 x-on:clikc으로 x-data를 늘이고 줄이는 예제와
x-show와 x-transition을 이용해 해당 요소를 숨겼다 꺼내는 예제를 섞습니다!

 

연산자 중에 %가 있죠?
x-data="{val: 0}"를 만들고 이걸 x-on:clikc으로 늘였다 줄이고요.

 

x-show의 값은 val%'페이징갯수'=='현재페이지번호(0부터 시작)'

이렇게 해주면 해당 페이지만 true가 되면서 보여지고
다른 페이지들은 자동으로 숨겨지는 예제입니다!

 

 

 

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://unpkg.com/alpinejs@3.10.4/dist/cdn.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div x-data="{val: 0}">
    <ul x-show="val%3==0" x-transition>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
    <ul x-show="val%3==1" x-transition>
      <li>A1</li>
      <li>B1</li>
      <li>C1</li>
    </ul>
    <ul x-show="val%3==2" x-transition>
      <li>A2</li>
      <li>B2</li>
      <li>C2</li>
    </ul>
    <button x-on:click="val = val-1">이전</button>
    <button x-on:click="val = val+1">다음</button>
  </div>
</body>
</html>

 

아주 간단합니다!

 

반복문으로 배열을 화면에 뿌려줄 때 특정 갯수 이상 <li>가 생성되면
자동으로 다음페이지가 되도록 조건문만 추가해주면 되겠죠~

 

 

단점은 x-transition으로 각 페이지가 바뀔 때
이전 페이지와 다음 페이지가 아주 잠깐, 한 0.3초정도?
동시에 떴다가 사라지는 이슈 때문에

리스트가 길어졌다가 되돌아오는 모습을 보입니다.

 

덤으로 val이 0일 때 이전버튼을 누르면 표시할 목록이 없어서
빈 리스트가 보여지는 문제가 있죠.

 

 

그걸 보완한 완성 코드입니다!

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://unpkg.com/alpinejs@3.10.4/dist/cdn.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div x-data="{val: 0}">
    <div style="overflow: hidden; height: 100px;">
      <ul x-show="val%3==0" x-transition>
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
      <ul x-show="val%3==1" x-transition>
        <li>A1</li>
        <li>B1</li>
        <li>C1</li>
      </ul>
      <ul x-show="val%3==2" x-transition>
        <li>A2</li>
        <li>B2</li>
        <li>C2</li>
      </ul>
    </div>
    <button x-on:click="val = val-1" x-show="val>0">이전</button>
    <button x-on:click="val = val+1" x-show="val<2">다음</button>
  </div>
</body>
</html>

짜잔~ 완성!

 

좋은하루 되세요~

반응형
저작자표시