jQuery plugin, Pager 입니다

프로그래밍/JQuery |  2010/03/22 03:43
jQuery.Taeyo.Pager.zip
페이저 애드인은 ajax 방식으로 게시판이나 다양한 데이터를 로드하면서
페이징 기능을 덧붙이고자 하는 경우에 도움이 되는 애드인입니다.

다만, 이는 실제 데이터를 가져오거나 하는 애드인이 아니며, 오로지 전체 레코드 수(totalItemCount)와 페이지 당 출력할 레코드 수(RecordPerPage)에 따라서 전체 페이지 수와 페이징 구역을 계산 및 출력 하는 애드인입니다.

실제로 해당 페이지의 데이터를 가져오는 함수는 여러분이 직접 작성하셔야 하며,
페이저 사용 규칙에 맞게 함수를 호출하시면 페이징이 자동으로 렌더될 것입니다.

샘플은 http://taeyo.net/jQuery/Sample/pager.htm 을 참고하십시오.
현재, 태오 사이트의 새로운 디지털 다이어리는 이 애드인을 사용하여 만들어지고 있습니다.

다음은 사용방법입니다.

1. 페이저를 출력할 위치를 html 태그로 작성한다.
예 : <span id="pager"></span>

2. jQuery의 ready 함수 안에서 다음과 같이 페이저를 초기화 한다.
$("#pager").pager({
pager: "#pager",
pagerMode: "image", //text, image 중 선택
totalItemCount: _totalItemCount,
recordPerPage: _recordPerPage,
currentPage: _currentPage,
pageIndexChanged: Pager.pageIndexChanged,
prev10Text: "<<",
next10Text: ">>",
prev10ImgSrc: "images/Prev10.gif",
next10ImgSrc: "images/next10.gif",
selectedPageFontColor: "orange"
});

_totalItemCount와 _recordPerPage, _currentPage는 전역변수로 선언되어야 할 것이다.
그리고, 이 값은 여러분이 적절하게 설정하면 된다.

3. 페이저의 클릭 이벤트와 관련된 콜백 메서드들을 여러분에게 맞게 정의하자.

var Pager = {
pageIndexChanged: function(selectedPage) {
_currentPage = selectedPage;
loadBoardData(); //목록 조회 및 출력 메서드 호출
}
}
여기서의 loadBoardData() 메서드는 여러분이 데이터베이스에서 데이터를 조회하는 메서드이다.
메서드 명은 여러분의 상황에 맞게 바꾸면 된다.
강조했듯이, 페이저 애드인이 실제 데이터를 로드해주지는 않는다.

4. loadBoardData() 메서드 안에서 여러분의 작업이 모두 끝난 다음, 제일 마지막에 다음과 같은 코드를 추가하여
페이저를 갱신하도록 한다. 갱신을 하지 않으면, 페이저의 페이징 정보가 실제 갯수와 동기화 되지 않을테니 말이다.
갱신을 위해서는 다음의 메서드를 호출하면 된다. 반드시 refresh의 인자로 _totalItemCount, _recordPerPage를 넘겨줘야만
제대로 갱신된다는 점에 주의하자.
또한, refresh 메서드는 계산된 전체 페이지 갯수를 반환한다.

function loadBoardData()
{
//여러분의 작업
//...
//...

var pageCount = $("#pager").pager.refresh(_totalItemCount, _recordPerPage);
}

끝.

ps : 1차 배포 후, 일부 로직을 개선하여 좀 더 코드를 줄였습니다. 현재 파일은 2차 배포버전입니다.
2010/03/22 03:43 2010/03/22 03:43
No trackbacks, No comments.

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

<< Previous Page 1 ... 2063 Next Page >>