本文共 3017 字，大约阅读时间需要 10 分钟。

效果如下：

引入js和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文件：

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(                '
   
    ',                '
    
' + this.options.pageGo() + ':
',                '
    
',                '
    
GO
',                '
   
');        // 放到原先的分页组件后面      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文件：

 > 里面扩展写法为：> formatClearFilters: function () {      return '清空过滤';  },  pageGo: function () {      return '跳转到';  }

在渲染表格的js代码中添加 paginationShowPageGo: true, 即可：

$("#table").bootstrapTable({    pagination: true,    paginationShowPageGo: true,    columns: []});

转载地址：http://ttvq.baihongyu.com/