jquery를 이용한 ajax 테이블 페이징
테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다.
여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조
아래와 같은 순서로 해볼것이다.
- 보여줄 페이지설정
- 전체 페이지계산
- 스크립트로 페이지버튼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 = $('
');
//pager라는 클래스의 div엘리먼트 작성
for (var page = 0; page < numPages; page++) {
$('').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 = $('
');
for (var page = 0; page < numPages; page++) {
$('').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.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
댓글