bootstrap-table-sticky-header.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define([], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory();
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory();
  11. global.bootstrapTableStickyHeader = mod.exports;
  12. }
  13. })(this, function () {
  14. 'use strict';
  15. /**
  16. * @author vincent loh <vincent.ml@gmail.com>
  17. * @version: v1.1.0
  18. * https://github.com/vinzloh/bootstrap-table/
  19. * Sticky header for bootstrap-table
  20. * @update J Manuel Corona <jmcg92@gmail.com>
  21. */
  22. (function ($) {
  23. 'use strict';
  24. var sprintf = $.fn.bootstrapTable.utils.sprintf;
  25. $.extend($.fn.bootstrapTable.defaults, {
  26. stickyHeader: false
  27. });
  28. var bootstrapVersion = 3;
  29. try {
  30. bootstrapVersion = parseInt($.fn.dropdown.Constructor.VERSION, 10);
  31. } catch (e) {}
  32. var hidden_class = bootstrapVersion > 3 ? 'd-none' : 'hidden';
  33. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  34. _initHeader = BootstrapTable.prototype.initHeader;
  35. BootstrapTable.prototype.initHeader = function () {
  36. var that = this;
  37. _initHeader.apply(this, Array.prototype.slice.apply(arguments));
  38. if (!this.options.stickyHeader) {
  39. return;
  40. }
  41. var table = this.$tableBody.find('table'),
  42. table_id = table.attr('id'),
  43. header_id = table.attr('id') + '-sticky-header',
  44. sticky_header_container_id = header_id + '-sticky-header-container',
  45. anchor_begin_id = header_id + '_sticky_anchor_begin',
  46. anchor_end_id = header_id + '_sticky_anchor_end';
  47. // add begin and end anchors to track table position
  48. table.before(sprintf('<div id="%s" class="%s"></div>', sticky_header_container_id, hidden_class));
  49. table.before(sprintf('<div id="%s"></div>', anchor_begin_id));
  50. table.after(sprintf('<div id="%s"></div>', anchor_end_id));
  51. table.find('thead').attr('id', header_id);
  52. // clone header just once, to be used as sticky header
  53. // deep clone header. using source header affects tbody>td width
  54. this.$stickyHeader = $($('#' + header_id).clone(true, true));
  55. // avoid id conflict
  56. this.$stickyHeader.removeAttr('id');
  57. // render sticky on window scroll or resize
  58. $(window).on('resize.' + table_id, table, render_sticky_header);
  59. $(window).on('scroll.' + table_id, table, render_sticky_header);
  60. // render sticky when table scroll left-right
  61. table.closest('.fixed-table-container').find('.fixed-table-body').on('scroll.' + table_id, table, match_position_x);
  62. this.$el.on('all.bs.table', function (e) {
  63. that.$stickyHeader = $($('#' + header_id).clone(true, true));
  64. that.$stickyHeader.removeAttr('id');
  65. });
  66. function render_sticky_header(event) {
  67. var table = event.data;
  68. var table_header_id = table.find('thead').attr('id');
  69. // console.log('render_sticky_header for > '+table_header_id);
  70. if (table.length < 1 || $('#' + table_id).length < 1) {
  71. // turn off window listeners
  72. $(window).off('resize.' + table_id);
  73. $(window).off('scroll.' + table_id);
  74. table.closest('.fixed-table-container').find('.fixed-table-body').off('scroll.' + table_id);
  75. return;
  76. }
  77. // get header height
  78. var header_height = '0';
  79. if (that.options.stickyHeaderOffsetY) header_height = that.options.stickyHeaderOffsetY.replace('px', '');
  80. // window scroll top
  81. var t = $(window).scrollTop();
  82. // top anchor scroll position, minus header height
  83. var e = $("#" + anchor_begin_id).offset().top - header_height;
  84. // bottom anchor scroll position, minus header height, minus sticky height
  85. var e_end = $("#" + anchor_end_id).offset().top - header_height - $('#' + table_header_id).css('height').replace('px', '');
  86. // show sticky when top anchor touches header, and when bottom anchor not exceeded
  87. if (t > e && t <= e_end) {
  88. // ensure clone and source column widths are the same
  89. $.each(that.$stickyHeader.find('tr').eq(0).find('th'), function (index, item) {
  90. $(item).css('min-width', $('#' + table_header_id + ' tr').eq(0).find('th').eq(index).css('width'));
  91. });
  92. // match bootstrap table style
  93. $("#" + sticky_header_container_id).removeClass(hidden_class).addClass("fix-sticky fixed-table-container");
  94. // stick it in position
  95. $("#" + sticky_header_container_id).css('top', header_height + 'px');
  96. // create scrollable container for header
  97. var scrollable_div = $('<div style="position:absolute;width:100%;overflow-x:hidden;" />');
  98. // append cloned header to dom
  99. $("#" + sticky_header_container_id).html(scrollable_div.append(that.$stickyHeader));
  100. // match clone and source header positions when left-right scroll
  101. match_position_x(event);
  102. } else {
  103. // hide sticky
  104. $("#" + sticky_header_container_id).removeClass("fix-sticky").addClass(hidden_class);
  105. }
  106. }
  107. function match_position_x(event) {
  108. var table = event.data;
  109. var table_header_id = table.find('thead').attr('id');
  110. // match clone and source header positions when left-right scroll
  111. $("#" + sticky_header_container_id).css('width', +table.closest('.fixed-table-body').css('width').replace('px', '') + 1);
  112. $("#" + sticky_header_container_id + " thead").parent().scrollLeft(Math.abs($('#' + table_header_id).position().left));
  113. }
  114. };
  115. })(jQuery);
  116. });