본문 바로가기
프론트앤드 개발

자바스크립트 JQuery 페이징

by 긴자손 2010. 10. 15.
728x90
반응형

<script type="text/javascript">

$(document).ready(function(){


var loc = location.href; // 페이지주소받아오기위한 변수

var page = loc.match(/PageNo\=[0-9]+/g); // 숫자만 찾는 정규식(/PageNo <--이부분은 .html?다음에들어가는부분이다)

if(page) 

{

page = page[0].replace('PageNo=','');

}

if(!page)

{

page= 1;

}

var opts ={

'total_record' : {{pages|getAttr:'TotalContent'}} , //총페이지수

'current_page' : page, //현재페이지

'block_size'   : 10 , // 페이징에 나타날 숫자 

'items_per_page' : 10 , // 한페이지에 나타낼 수

'link_to' : 'notice.html?PageNo=__id__' // 링크. 즉 주소다.. 물론 상대적경로

}

//$(".pagination").paging(opts); // DIV의 클래스명


});

     (function($){ 

$.extend($.fn, { 


paging : function(opts)

{

var options = $.extend($.fn.paging.defaults, opts);

var current_page = options.current_page;

var total_record = options.total_record;

var total_page   = Math.ceil(options.total_record / options.items_per_page);

var start_number;

var last_start_page;


if((current_page%options.block_size) == 0) {

start_number   = Math.floor((parseInt(current_page)-1)/options.block_size) * options.block_size + 1;

}else {

start_number   = Math.floor((parseInt(current_page))/options.block_size) * options.block_size + 1;

}

if((total_page%options.block_size) == 0) {

last_start_page = Math.floor((parseInt(total_page) - 1) / options.block_size) * options.block_size + 1;

}else { 

last_start_page = Math.floor((parseInt(total_page)) / options.block_size) * options.block_size + 1;

}

return this.each(function(){

var $container = $(this);

$container.empty();


var interval = getInterval();


var appendItem = function(page_id, appendopts)

{

appendopts = $.extend({text:page_id, classes:""}, appendopts||{});

if(page_id == current_page) {

var lnk = $("<span class='cur_num'>"+(appendopts.text)+"</span>");

}else {

var lnk = $("<a class='num_box'>"+(appendopts.text)+"</a>").attr('href', options.link_to.replace(/__id__/,page_id));

}

if(appendopts.classes){lnk.addClass(appendopts.classes);}

$container.append(lnk);

}

if(options.prev_text && options.prev_show_always){

if(start_number > 1 ) { 

appendItem(parseInt(interval[0])-1,{text:options.prev_text, classes:"num_prev"});

}

}


for(var i=interval[0]; i<=interval[1]; i++) {

appendItem(i);

}

if(options.next_text && options.next_show_always){

if (current_page < last_start_page){

appendItem(parseInt(interval[1])+1,{text:options.next_text, classes:"num_next"});

}

}


});


function getInterval()

{

var start = start_number;

if(current_page > last_start_page )  start = last_start_page;

var end   = Math.min(start_number+options.block_size-1,total_page);

if(current_page < 0 ) {

start = 1;

end  = 10;

}

return [start,end];

}

}


});

$.fn.paging.defaults = {

'total_record' : 0 , 

'current_page' : 1 ,

'items_per_page':10,

'block_size':10 ,

'prev_text'    : "이전페이지",

'next_text'    : "다음페이지",

'link_to'   : "#",

'prev_show_always' :true,

'next_show_always' :true

};


})(jQuery);


</script>


<div id="pagingNav" class="pagination"></div>


728x90
반응형