Javascript 페이지네이션 jQuery 플러그인으로 간편하게 구현

📘 페이지네이션 jQuery 플러그인 제공해주는 공식홈페이지 주소 : https://pagination.js.org/

 

 

html haed에 아래와 같이 jquery, paginationjs, javascript 파일을 불러오고 paginationsjs의 css를 적용

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>

 

출력 데이터와 페이지네이션 영역을 id값을 추가하여 만들어줍니다.

<div id="data-container"></div>
<div id="pagination"></div>

 

그리고 javascript 코드로 원하는 페이지네이션을 구현해주면 됩니다.

위에 언급한 홈페이지에 들어가면 여러 속성을 넣어 페이지네이션을 구현할 수 있습니다.