Bootstrap Table 拓展"跳转到"功能

Bootstrap Table 拓展"跳转到"功能

前言

Bootstrap Table组件在针对可分页的查询页面来说,数据量小还好说一些,但一单当页的显示数量和页数很多的情况下,想记住某一条记录在某一页你也是很难指定的.

实现

JavaScript

追加在Bootstrap-table.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(
                '<ul class="pagination-jump">',
                '<li class=""><span>' + this.options.pageGo() + ':</span></li>',
                '<li class=""><input style="margin-left: 1px;margin-right: 1px;border-radius: 4px;" type="text" class="page-input" value="' + this.options.pageNumber + '"   /></li>',
                '<li class=""><span style="padding-left: 3px;">页</span></li>',
                '<li class="page-go"><a class="jump-go" href="" style="border-radius: 4px;">确定</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);

CSS

可以新启CSS文件或追加在Bootstrap-table.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;
}

调用

在JavaScript中进行引用Bootstrap-table.js时增加新的属性配置项

paginationShowPageGo: true