Updated sticky table header extenion

This commit is contained in:
snipe
2018-02-16 15:36:21 -08:00
parent 5fd50040d3
commit f44b03f5a9
@@ -1,8 +1,9 @@
/**
* @author vincent loh <vincent.ml@gmail.com>
* @version: v1.0.0
* @version: v1.1.0
* https://github.com/vinzloh/bootstrap-table/
* Sticky header for bootstrap-table
* @update J Manuel Corona <jmcg92@gmail.com>
*/
(function ($) {
@@ -13,6 +14,12 @@
stickyHeader: false
});
var bootstrapVersion = 3;
try {
bootstrapVersion = parseInt($.fn.dropdown.Constructor.VERSION, 10);
} catch (e) { }
var hidden_class = bootstrapVersion > 3 ? 'd-none' : 'hidden';
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initHeader = BootstrapTable.prototype.initHeader;
@@ -20,17 +27,19 @@
var that = this;
_initHeader.apply(this, Array.prototype.slice.apply(arguments));
if (!this.options.stickyHeader) return;
if (!this.options.stickyHeader) {
return;
}
var table = this.$tableBody.find('table');
var table_id = table.attr('id');
var header_id = table.attr('id') + '-sticky-header';
var sticky_header_container_id = header_id +'-sticky-header-container';
var anchor_begin_id = header_id +'_sticky_anchor_begin';
var anchor_end_id = header_id +'_sticky_anchor_end';
var table = this.$tableBody.find('table'),
table_id = table.attr('id'),
header_id = table.attr('id') + '-sticky-header',
sticky_header_container_id = header_id +'-sticky-header-container',
anchor_begin_id = header_id +'_sticky_anchor_begin',
anchor_end_id = header_id +'_sticky_anchor_end';
// add begin and end anchors to track table position
table.before(sprintf('<div id="%s" class="hidden"></div>', sticky_header_container_id));
table.before(sprintf('<div id="%s" class="%s"></div>', sticky_header_container_id, hidden_class));
table.before(sprintf('<div id="%s"></div>', anchor_begin_id));
table.after(sprintf('<div id="%s"></div>', anchor_end_id));
@@ -38,7 +47,7 @@
// clone header just once, to be used as sticky header
// deep clone header. using source header affects tbody>td width
this.$stickyHeader = $($('#'+header_id).clone());
this.$stickyHeader = $($('#'+header_id).clone(true, true));
// avoid id conflict
this.$stickyHeader.removeAttr('id');
@@ -48,7 +57,12 @@
// render sticky when table scroll left-right
table.closest('.fixed-table-container').find('.fixed-table-body').on('scroll.'+table_id, table, match_position_x);
function render_sticky_header(event){
this.$el.on('all.bs.table', function (e) {
that.$stickyHeader = $($('#'+header_id).clone(true, true));
that.$stickyHeader.removeAttr('id');
});
function render_sticky_header(event) {
var table = event.data;
var table_header_id = table.find('thead').attr('id');
// console.log('render_sticky_header for > '+table_header_id);
@@ -75,7 +89,7 @@
$(item).css('min-width', $('#'+table_header_id+' tr').eq(0).find('th').eq(index).css('width'));
});
// match bootstrap table style
$("#"+sticky_header_container_id).removeClass('hidden').addClass("fix-sticky fixed-table-container") ;
$("#"+sticky_header_container_id).removeClass(hidden_class).addClass("fix-sticky fixed-table-container") ;
// stick it in position
$("#"+sticky_header_container_id).css('top', header_height + 'px');
// create scrollable container for header
@@ -86,7 +100,7 @@
match_position_x(event);
} else {
// hide sticky
$("#"+sticky_header_container_id).removeClass("fix-sticky").addClass('hidden');
$("#"+sticky_header_container_id).removeClass("fix-sticky").addClass(hidden_class);
}
}