디자인팁

[Java Script] 페이징

페이지 정보

작성자 BSAA 작성일16-06-24 17:30 조회3,134회 댓글0건

본문

블로그형 홈페이지 디자인으로 작업을 했습니다.

시안 내용 하단에 게시판 페이징 기능을 넣어놨습니다. 

 

페이징 샘플보기

 

index.html 파일


10번째 라인 <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 필수로 불러와야하는 옵션입니다.

11번째 라인 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 페이징 기능을 연동시키는 ui 파일입니다.

13번째 라인<script type="text/javascript" src="paging.js"></script>  페이징 스크립트 파일

14번째 

<script type="text/javascript">

            $(document).ready(function() { <----- 문서안에 이번트를 넣어줍니다.

                $('#tableData').paging({limit:3}); <---- 테이블 아이디 값에 리스트 정렬수를 설정합니다. (3을 입력시 1페이징에 3개 컨텐츠가 보여집니다.)

            });

</script> 

<table id="tableData" class="table table-bordered table-striped">

<tr>

<td>컨텐츠에 들어갈 내용</td>

</tr>

</table>​

 

id 값은 "tableData"로 입력 후, 클레스 네임과 동일해야 합니다.

페이징 버튼은 css로 수정이 가능합니다.


 

파일 다운로드

댓글목록

등록된 댓글이 없습니다.