分页组件

Bootstrap本身带有分页组件，以此为基础延伸一个 JavaScript类，以便更好使用。效果图如下：

使用上必须先在 html檔中部署 Bootstrap分页组件，并命名为 #nvaPageUL，如下：

<nav aria-label="Page navigation">
  <ul class="pagination" id="navPageUL">
  </ul>
</nav>   

然后在显示分页内容之后，呼叫 myNavPage.setPage

var myApp = {
    pageSize: 50,
    totalCX : 0,
    pageCX  : 0,
    curPage : 1,
    getOnePage : function( pageNo ) {
        …
        myNavPage.setPage(myApp.curPage, myApp.pageCX,myApp.getOnePage);
        return false;
}

myNavPage在#navPageUL中动态加入<li><a>，然后利用 <a> 的 rel属性纪录按下后要切换的页号，所以必须传入一个函式，以便扩充 myNavPage的通用性。

var myNavPage = {
    setPage : function( pageNo, pageCX, changePageFn ) {
        var navPage = $("#navPageUL");
        navPage.empty(); // 全部清除

        if( pageCX < 2 ) return false;
        
        var pageStart = pageNo - 5;
        if( pageStart < 1 ) pageStart = 1; 
    
        var prevPage = pageNo - 1;
        var nextPage = pageNo + 1;
        
        // firstPage
        navPage.append('<li><a href="#" rel="1">First</a></li>');

        // prevPage
        var url = '<a href="#" aria-label="Previous" rel="' + prevPage + 
                  '"><span aria-hidden="true">«</span></a>';
        if( pageNo == 1 ) 
            navPage.append('<li class="disabled">' + url + '</li>');
        else
            navPage.append('<li>' + url + '</li>');
            
        for(i=0; i<11; i++) {
            var pNo = pageStart + i;
            if( pNo > pageCX ) break;
            
            url = '<a href="#" rel="' +pNo + '">' + pNo + '</a>';
            if( pNo == pageNo )
                navPage.append('<li class="active">' + url + '</li>');
            else
                 navPage.append('<li>' + url + '</li>');
       }
                        
        // nextPage  
        url = '<a href="#" rel="' + nextPage + '" aria-label="Next">' +
                  '<span aria-hidden="true">»</span></a>';
        if( pageNo == pageCX ) 
            navPage.append('<li class="disabled">' + url + '</li>');
        else
            navPage.append('<li>' + url + '</li>');                 
        
        // lastPage
        navPage.append('<li><a href="#" rel="' + pageCX + '">Last</a></li>');

        $("#navPageUL").on("click", "a", function(){
            var rel = $(this).attr("rel");
            changePageFn( parseInt(rel) );
            return false;
        });             
    }
};