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;
        });             
    }
};