trollolodn icon

#jquery: limit the paging buttons show + #twitter-bootstrap

trollolodn | PRO | 05/24/13 07:55:41 AM UTC | 0 ⭐ | 188 👁️ | Never ⏰ | []
JavaScript |

2.97 KB

|

None

|

0 👍

/

0 👎

/* 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