bootstrap添加checkbox和跳转至第多少页

1.添加checkbox只需要在column里设置checkbox：true即可，可以设置checkbox是否可以选中，见下文

列选项配置： {field: "check", title: "",align: "center", checkbox: true,formatter:stateFormatter},

function stateFormatter(value, row, index) {
            if (row.id == 561)
                return {
                    disabled : true,//设置是否可用
                    checked : true//设置选中
                };
            return value;
        }

2.添加跳转需要添加官方插件，地址：https://github.com/zhaoshuxue/bootstrap-table/tree/develop/src/extensions/page-jumpto

代码贴出来

bootstrap-table-jumpto.js

/**
* @author Jay <[email protected]>
*/

(function ($) {
'use strict';
var sprintf = $.fn.bootstrapTable.utils.sprintf;

$.extend($.fn.bootstrapTable.defaults, {
showJumpto: false,
exportOptions: {}
});

$.extend($.fn.bootstrapTable.locales, {
formatJumpto: 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.showJumpto) {
var that = this,
$pageGroup = this.$pagination.find('ul.pagination'),
$jumpto = $pageGroup.find('li.jumpto');

if (!$jumpto.length) {
$jumpto = $([
'<li class="jumpto">',
'<input type="text" class="form-control">',
'<button class="btn' +
sprintf(' btn-%s', this.options.buttonsClass) +
sprintf(' btn-%s', this.options.iconSize) +
'" title="' + this.options.formatJumpto() + '" ' +
' type="button">'+this.options.formatJumpto(),
'</button>',
'</li>'].join('')).appendTo($pageGroup);

$jumpto.find('button').click(function () {
that.selectPage(parseInt($jumpto.find('input').val()));
});
}
}
};
})(jQuery);

bootstrap-table-jumpto.css

.jumpto input {

height: 31px;

width: 50px;

margin-left: 5px;

margin-right: 5px;

text-align: center;

display: inline-block;

}

在项目中引入两个文件

< link  rel = “ stylesheet ”  href = “ extensions / page-jumpto / bootstrap-table-jumpto.css ” > </ style >
< script  src = “ extensions / page-jumpto / bootstrap-table-jumpto.js ” > </ script >

来源： https://github.com/zhaoshuxue/bootstrap-table/tree/develop/src/extensions/page-jumpto

然后table添加 data-show-jumpto属性

<table id="filteredMemberTable" data-show-jumpto = "true"></table>

bootstrap添加checkbox和跳转至第多少页

猜你喜欢