jquery를 이용한 ajax 테이블 페이징

테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다.

여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조

접기

<table class="sortable paginated">
<caption>베스트셀러</caption>
<thead>
<tr>
<th></th>
<th class="sorting">순위</th>
<th class="sorting">책제목</th>
<th class="sorting">저자</th>
<th class="sort-date">출판사</th>
<th class="sorting">가격</th>
</tr>
</thead>
<tbody>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/061/864/06186469.jpg?type=m1"></td>
<td>1</td>
<td>덕혜옹주</td>
<td>권비영</td>
<td>다산책방</td>
<td>11,800원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/062/277/06227737.jpg?type=m1"></td>
<td>2</td>
<td>삼성을 생각한다</td>
<td>김용철</td>
<td>사회평론</td>
<td>22,000원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/061/962/06196209.jpg?type=m1"></td>
<td>3</td>
<td>죽을 때 후회하는 스물다섯 가지</td>
<td>오츠 슈이치</td>
<td>21세기북스</td>
<td>12,000원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/062/123/06212320.jpg?type=m1"></td>
<td>4</td>
<td>시크릿 두 번째 이야기</td>
<td>폴 해링턴</td>
<td>살림</td>
<td>12,000원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/060/537/06053729.jpg?type=m1"></td>
<td>5</td>
<td>1Q84</td>
<td>무라카미 하루키</td>
<td>문학동네</td>
<td>14,800원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/061/932/06193283.jpg?type=m1"></td>
<td>6</td>
<td>마법의 돈관리</td>
<td>고득영</td>
<td>국일미디어</td>
<td>12,000원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/061/972/06197265.jpg?type=m1"></td>
<td>7</td>
<td>박철범의 하루공부법</td>
<td>박철범</td>
<td>다산에듀</td>
<td>12,000원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/049/791/04979122.jpg?type=m1"></td>
<td>8</td>
<td>엄마를 부탁해</td>
<td>신경숙</td>
<td>창비</td>
<td>10,000원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/060/474/06047439.jpg?type=m1"></td>
<td>9</td>
<td>아이의 사생활</td>
<td>EBS</td>
<td>지식채널</td>
<td>16,800원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/060/376/06037660.jpg?type=m1"></td>
<td>10</td>
<td>그건, 사랑이였네</td>
<td>한비야</td>
<td>푸른숲</td>
<td>12,000원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/062/246/06224688.jpg?type=m1"></td>
<td>11</td>
<td>김연아의 7분 드라마</td>
<td>김연아</td>
<td>중아출판사</td>
<td>15,000원</td>
</tr>
 
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/062/171/06217189.jpg?type=m1"></td>
<td>12</td>
<td>아버지의 눈물</td>
<td>김정현</td>
<td>문이당</td>
<td>11,000원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/029/108/02910899.jpg?type=m1"></td>
<td>13</td>
<td>쓸만한 아이</td>
<td>이금이</td>
<td>푸른책들</td>
<td>8,800원</td>
</tr>
<tr>
<td><imgsrc="http://bookthumb.phinf.naver.net/cover/052/586/05258669.jpg?type=m1"></td>
<td>14</td>
<td>일본전산이야기</td>
<td>감성호</td>
<td>쌤앤파커스</td>
<td>14,500원</td>
</tr>
 
</tbody>
</table>

접기

아래와 같은 순서로 해볼것이다.

보여줄 페이지설정
전체 페이지계산
스크립트로 페이지버튼html 소스짜기

보여줄 페이지 설정

한페이지당 우리는 표에서 5개를 봉줄것이다. 따라서 다음과 같이 정한다.

$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 5;
var $table = $(this);
var repaginate = function() {
$table.find('tbody tr').hide()
//기본적으로 모두 감춘다
.slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage)
.show();
//현재페이지+1 곱하기 현재페이지까지 보여준다
};   

currentPage로 초기값을 0으로주었다.그리고 numPerPage로 기본값을 5로주고 그아래는 계산하고.slice()메소드를 이용해 필요한 만큼 보여주도록 되어있다.

페이지계산 하기

표가 여러개있고 그중 우리는 5개식 보여주기로 했다. 전체표의 열을 5로나누었을때 소수가 되면 페이지계산이안되니 반올림해서 페이지를 늘이도록하자.

var numRows = $table.find('tbody tr').length;
//length로 전체길이구함
var numPages = Math.ceil(numRows / numPerPage);
//Math.ceil를 이용하여 반올림

위와 같이 한다면 기본소스에서 14열을 사용했으니 반올림하여 14/5 = 3. 따라서 3개의 페이지가 만들어질 것이다.

페이지버튼 html 소스짜기

마지막으로 해 줄 것은 페이지버튼을 만들어주는것이다. 페이지가 늘어남에따라 이버튼역시 늘어나니 스크립트로 만들어줘야한다.

 
var $pager = $('<div class="pager">
</div>
');
//pager라는 클래스의 div엘리먼트 작성
for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1)
.bind('click', {newPage: page}, function(event) {        
currentPage = event.data['newPage'];
repaginate();
//for구문을 이용하여 페이지 수만큼
//버튼을 구현
$(this).addClass('active')
//활성화된페이지에는 active라는 클래스명을 붙여준다.
.siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}  
$pager.insertBefore($table)
//앞서 설정한 페이지키를 삽입
.find('span.page-number:first').addClass('active');
});

위에서 이벤트가 .click으로 바로 가지않고 .bind로 설정된것은 변수들이 함수밖에 정의되있는것을 참조하기 때문이다. 그냥.click으로 처리한다면 빈페이지가뜰것이다. 이로서 완성되었다.3개의 페이지버튼이나오것이고 한페이지에 5열이 나올 것이다.

다시 둘러보기

이 함수가 정열과 함께 사용되려면 정열이될때마다 페이징이 실행되도록 하면된다.이때 역시 외부에서 참조 하도록 .bind를 쓴다. 최종 코드를보자

 
$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 5;
var $table = $(this);   
 
$table.bind('repaginate', function() {
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage)
.show();});
 
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pager">
</div>
');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1)
.bind('click', {newPage: page}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active')
.siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');}
$pager.insertBefore($table)
.find('span.page-number:first').addClass('active');});}); 

마지막으로 호출하기위해 앞쪽의 정렬키뒤에 $table.trigger('repaginate'); 를 추가 해준다

.
..
...
$table.find('th').removeClass('sorted-asc')
.removeClass('sorted-desc');
if (sortDirection == 1) {
$header.addClass('sorted-asc');
}
else {
$header.addClass('sorted-desc');
}
$table.alternateRowColors();
 
$table.trigger('repaginate');     });

예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usePage.html

출처 - http://siana.tistory.com/entry/ajax-%ED%85%8C%EC%9D%B4%EB%B8%94-%ED%8E%98%EC%9D%B4%EC%A7%95

저작자표시