/* Twitter: twitter.com/quocvuongdn */
/* Site: quocvuongdn.com */
/* Gmail: [email protected] */
function pagination_func(pageNumbers, objHtml){
maxPage = pageNumbers; //Numbers count to show
limitPageShow = 5; //Limit page
firstPage = 0; //ID first page
lastPage = 0;
arrOnlyPager = new Array(); //Array containing the id of pages
button_pager = objHtml;
html_pager_link = '';
if(maxPage <= limitPageShow && maxPage > 1){
//Chỉ đơn thuần là link
for(var i= 0; i < maxPage; i++){
html_pager_link += '<a href="#" class="btn" data-id="'+i+'">'+(i+1)+'</a>';
}
} else if(maxPage > limitPageShow){
//Thêm nút prev, next
html_pager_link = '<a href="#" class="btn" data-action="prev"><<</a>';
for(var i= 0; i < limitPageShow; i++){
html_pager_link += '<a href="#" class="btn" data-id="'+i+'">'+(i+1)+'</a>';
}
html_pager_link += '<a href="#" class="btn" data-action="next">>></a>';
}
$(button_pager).html(html_pager_link);
$(button_pager).parent().append('<p id="cuzP" style="text-align: center;">Page 1/'+maxPage+'</p>');
$(button_pager+' a').on('click', function(e){
e.preventDefault();
pageId = $(this).attr('data-id');
if(pageId == undefined){
pageAction = $(this).attr('data-action');
pageList = $(button_pager+' a');
if(pageAction == 'next'){
if(firstPage+limitPageShow < maxPage){
arrOnlyPager = new Array();
//Update tất cả các trang đang hiển thị + thêm 1
num_pageList = pageList.length;
for(var i=0; i < num_pageList; i++){
if(pageList[i].dataset.id){
newId = parseInt(pageList[i].dataset.id)+1;
newText = parseInt(pageList[i].innerHTML)+1;
$(pageList[i]).attr('data-id', newId);
$(pageList[i]).text(newText);
arrOnlyPager.push(newId);
}
}
firstPage = parseInt($(pageList[1]).attr('data-id'));
lastPage = (firstPage+5) - 1;
} else{
return false;
}
} else if(pageAction == 'prev'){
if(firstPage > 0){
arrOnlyPager = new Array();
num_pageList = pageList.length;
for(var i=0; i < num_pageList; i++){
if(pageList[i].dataset.id){
newId = parseInt(pageList[i].dataset.id)-1;
newText = parseInt(pageList[i].innerHTML)-1;
$(pageList[i]).attr('data-id', newId);
$(pageList[i]).text(newText);
arrOnlyPager.push(newId);
}
}
firstPage = parseInt($(pageList[1]).attr('data-id'));
lastPage = (firstPage+5) - 1;
} else{
return false;
}
}
} else{
//action callback, can using eval javascript
//pageId is current page.
currentStatus = 'Page '+(parseInt(pageId)+1)+'/'+maxPage;
$(button_pager).parent().find('#cuzP').text(currentStatus);
}
//Action finally, if you want?
});
}
//Example
//data.result is maxPage
// '#top_ten' is parent control, it will contains child tags
//pagination_func(data.result,'#top_ten');
//demo live
http://jsbin.com/egepic/1/
Comments