自定义Bootstrap-Table扩展——分页跳转到指定页码

需要添加bootstrap-table-pagejump.js和bootstrap-table-pagejump.css

bootstrap-table-pagejump.js

(function ($) {
  'use strict';
  $.extend($.fn.bootstrapTable.defaults, {
    // 默认不显示
    paginationShowPageGo: false
  });

  $.extend($.fn.bootstrapTable.locales, {
    pageGo: function () {
      // 定义默认显示文字，其它语言需要扩展
      return '跳转到';
    }
  });
  $.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(
          '<div style="display: inline-block;">',
          '<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>',
          '</div>');

      // 放到原先的分页组件后面
      //this.$pagination.find('ul.pagination').after(html.join(''));
      this.$pagination.find('div.pagination-detail').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);

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;
    text-decoration: none;
}
.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;
    background-color: #ffffff;
}
.pagination-jump>li>span{
    padding: 6px 3px 6px 12px;
}
.pagination-jump>li>.jump-go {
    margin-left: 0;
    padding: 6px;
    background-color: #1E9FFF;
    border-color: #1E9FFF;
    color: #ffffff;
}

界面html

//初始化表格
function initTable() {
    $PageTable = $('#selectDataTable'); //table对应id
    var columns = [
        {
            field: 'no',
            title: '序号',
            align: 'center',
            width: '50px',
            formatter:function(value,row,index){
                var options = $('#selectDataTable').bootstrapTable('getOptions');
                return options.pageSize * (options.pageNumber - 1) + index + 1;
            }
        }]; 
    $PageTable.bootstrapTable('destroy');
    $PageTable.bootstrapTable({
        columns: columns,
        url: '后台调用方法',
        method: 'get',//服务器数据的请求方式 'get' 或 'post'。
        striped: true, //设置为 true 会有隔行变色效果
        pagination: true,//设置为 true 会在表格底部显示分页条。
        dataType: 'json',   //服务器返回的数据类型。
        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
        sidePagination: 'server',
        pageNumber: 1,  //初始化加载第一页，默认第一页
        pageSize: 10, //每页的记录行数
        paginationShowPageGo: true, //跳转页码
        maintainSelected: true,
        fixedColumns: true,
        fixedNumber: 2,
        queryParams: queryParams
    });
    $PageTable.on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table', function (e, rows) {
        var datas = $.isArray(rows) ? rows : [rows]; // 点击时获取选中的行或取消选中的行
        examine(e.type, datas);// 保存到全局 Array() 里
    }); 
}

效果图