前言

最近專案使用的Metronic前端框架，表格外掛採用bootstrap-table V1.11.1（http://bootstrap-table.wenzhixin.net.cn/zh-cn/），是一款功能強大的表格外掛，非常適合在後臺管理系統裡使用。在此感謝作者將外掛開源（https://github.com/wenzhixin/bootstrap-table/）。
專案中需求，當資料總頁數>=10時，在分頁導航最後面顯示select，點選跳轉至任意頁數。該外掛是不支援的，需要自己進行擴充套件。

開始動手

這裡需要說明一下，下面的程式碼行數是能作為參考，可根據截圖所示附近程式碼進行查詢。
1、js程式碼321行左右，增加如下程式碼，作為外掛選項，控制是否開啟這個功能，預設true

paginationShowPageGo: true,

2、js程式碼1316行左右，增加如下程式碼，

$pagego,

3、js程式碼1488行左右，進行修改，並增加如下程式碼，就是當總頁數>=10且paginationShowPageGo===true時，在下一頁【>】按鈕後面，增加li，li裡拼裝一個select，select裡值列表為1至總頁數。

if(this.totalPages>= 10 && this.options.paginationShowPageGo){
     html.push('<li class="bootstrap-table-page-go">'
 
,
                   '<select>');
        for(var goi=1;goi<=this.totalPages;goi++){
             html.push('<option value="'+goi+'"');
             if(goi === this.options.pageNumber){
                  html.push(' selected');
             }
             html.push('>'+goi+'</option>'
 
);
        }
     html.push('</select>','</li>');
}

4、js程式碼1516行左右，增加如下程式碼，$pagego表示上述的li

$pagego = this.$pagination.find('.bootstrap-table-page-go');

5、js程式碼1548行左右，增加如下程式碼，為select繫結change事件

$pagego.find('select').off('change').on('change', $.proxy(this.onPageGo, this));

6、js程式碼1625行左右，增加如下程式碼，change事件的程式碼

BootstrapTable.prototype.onPageGo = function (event) {
        if (this.options.pageNumber === +$(event.currentTarget).val()) {
            return;
        }
        this.options.pageNumber = +$(event.currentTarget).val();
        this.updatePagination(event);
        return false;
    };

7、通過以上幾步完成了js的程式碼的新增，這一步要給select增加樣式，使其與其他按鈕統一。
css程式碼最後新增

.bootstrap-table .bootstrap-table-page-go select{
    height: 34px;
    border-left: none;
    border-color: #dddddd;
    padding:0 5px;
    color: #337ab7;
}

外掛擴充套件後的原始碼下載

從這裡http://download.csdn.net/download/lhtzbj12/9933559 下載。
原始碼中包括了筆者增加了另外兩項擴充套件
1. 使用Bootstrap-select對上述select進行美化，需要在頁面中引用Bootstrap-select，並將Bootstrap-table的選項paginationUseBSSelect設定為true
2. 根據Metronic樣式，將Bootstrap-table裡用於多選和單選的checkbox和radio進行裝飾。