效果如下：
引入js和css即可：
添加樣式文件：
<link rel="stylesheet" href="bootstrap-table-pagejump.css">bootstrap-table-pagejump.css：
.pagination-jump { margin: 0; } .pagination-jump { display: inline-block; padding-left: 1px; border-radius: 4px; } .pagination-jump>li { display: inline; } .pagination-jump>li>a, .pagination-jump>li>input, .pagination-jump>li>span { position: relative; float: left; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; } .pagination-jump>li>a { padding: 6px 12px; border: 1px solid #ddd; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .pagination-jump>li>input { padding: 6px 0px; border: 1px solid #ddd; border-top-left-radius: 4px; border-bottom-left-radius: 4px; width: 36px; text-align: center; } .pagination-jump>li>span{ padding: 6px 3px 6px 12px; } .pagination-jump>li>.jump-go { margin-left: 0; padding: 6px; }添加擴展js文件：
<script src="bootstrap-table-pagejump.js"></script>bootstrap-table-pagejump.js：
(function ($) { 'use strict'; $.extend($.fn.bootstrapTable.defaults, { // 默認不顯示 paginationShowPageGo: false }); $.extend($.fn.bootstrapTable.locales, { pageGo: function () { // 定義默認顯示文字，其它語言需要擴展 return 'Page Jump'; } }); $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales); var BootstrapTable = $.fn.bootstrapTable.Constructor, _initPagination = BootstrapTable.prototype.initPagination; // 擴展已有的初始化分頁組件的方法 BootstrapTable.prototype.initPagination = function() { _initPagination.apply(this, Array.prototype.slice.apply(arguments)); // 判斷是否顯示跳轉到指定頁碼的組件 if(this.options.paginationShowPageGo){ var html = []; // 渲染跳轉到指定頁的元素 html.push( '<ul class="pagination-jump">', '<li class=""><span>' + this.options.pageGo() + ':</span></li>', '<li class=""><input type="text" class="page-input" value="' + this.options.pageNumber + '" /></li>', '<li class="page-go"><a class="jump-go" href="">GO</a></li>', '</ul>'); // 放到原先的分頁組件后面 this.$pagination.find('ul.pagination').after(html.join('')); // 點擊按鈕觸發跳轉到指定頁函數 this.$pagination.find('.page-go').off('click').on('click', $.proxy(this.onPageGo, this)); // 手動輸入頁碼校驗，只允許輸入正整數 this.$pagination.find('.page-input').off('keyup').on('keyup', function(){ this.value = this.value.length == 1 ? this.value.replace(/[^1-9]/g,'') : this.value.replace(/\D/g,''); }); } }; // 自定義跳轉到某頁的函數 BootstrapTable.prototype.onPageGo = function (event) { // 獲取手動輸入的要跳轉到的頁碼元素 var $toPage=this.$pagination.find('.page-input'); // 當前頁不做處理 if (this.options.pageNumber === +$toPage.val()) { return false; } // 調用官方的函數 this.selectPage(+$toPage.val()); return false; }; })(jQuery);如果顯示中文的話，添加方言js文件：
<script src="../../locale/bootstrap-table-zh-CN.js"></script> > 里面擴展寫法為： > formatClearFilters: function () { return '清空過濾'; }, pageGo: function () { return '跳轉到'; }在渲染表格的js代碼中添加 paginationShowPageGo: true, 即可：
$("#table").bootstrapTable({ pagination: true, paginationShowPageGo: true, columns: [] });