/** * @author vincent loh * @version: v1.1.0 * https://github.com/vinzloh/bootstrap-table/ * Sticky header for bootstrap-table * @update J Manuel Corona */ (function ($) { 'use strict'; var sprintf = $.fn.bootstrapTable.utils.sprintf; $.extend($.fn.bootstrapTable.defaults, { 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; BootstrapTable.prototype.initHeader = function () { var that = this; _initHeader.apply(this, Array.prototype.slice.apply(arguments)); if (!this.options.stickyHeader) { return; } 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('
', sticky_header_container_id, hidden_class)); table.before(sprintf('
', anchor_begin_id)); table.after(sprintf('
', anchor_end_id)); table.find('thead').attr('id', header_id); // 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(true, true)); // avoid id conflict this.$stickyHeader.removeAttr('id'); // render sticky on window scroll or resize $(window).on('resize.' + table_id, table, render_sticky_header); $(window).on('scroll.' + table_id, table, render_sticky_header); // render sticky when table scroll left-right table.closest('.fixed-table-container').find('.fixed-table-body').on('scroll.' + table_id, table, match_position_x); 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); if (table.length < 1 || $('#' + table_id).length < 1) { // turn off window listeners $(window).off('resize.' + table_id); $(window).off('scroll.' + table_id); table.closest('.fixed-table-container').find('.fixed-table-body').off('scroll.' + table_id); return; } // get header height var header_height = '0'; if (that.options.stickyHeaderOffsetY) header_height = that.options.stickyHeaderOffsetY.replace('px', ''); // window scroll top var t = $(window).scrollTop(); // top anchor scroll position, minus header height var e = $("#" + anchor_begin_id).offset().top - header_height; // bottom anchor scroll position, minus header height, minus sticky height var e_end = $("#" + anchor_end_id).offset().top - header_height - $('#' + table_header_id).css('height').replace('px', ''); // show sticky when top anchor touches header, and when bottom anchor not exceeded if (t > e && t <= e_end) { // ensure clone and source column widths are the same $.each(that.$stickyHeader.find('tr').eq(0).find('th'), function (index, item) { $(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_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 var scrollable_div = $('
'); // append cloned header to dom $("#" + sticky_header_container_id).html(scrollable_div.append(that.$stickyHeader)); // match clone and source header positions when left-right scroll match_position_x(event); } else { // hide sticky $("#" + sticky_header_container_id).removeClass("fix-sticky").addClass(hidden_class); } } function match_position_x(event) { var table = event.data; var table_header_id = table.find('thead').attr('id'); // match clone and source header positions when left-right scroll $("#" + sticky_header_container_id).css( 'width', +table.closest('.fixed-table-body').css('width').replace('px', '') + 1 ); $("#" + sticky_header_container_id + " thead").parent().scrollLeft(Math.abs($('#' + table_header_id).position().left)); } }; })(jQuery);