Bootstrap 3 Fixed Table Header - Inject THEAD

by freedawirl

HTML

<script src="//capmetro.org/gage/vendor/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//capmetro.org/gage/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="//capmetro.org/closedlist/css/style.css">
<div id="detail" class="container-fluid">
  <div class="page-header">
    <h1>Table Fixed Header</h1>
    <p>From by MacMan</p>
  </div>
  <table class="table table-bordered table-fixed-header" data-from="01/11/2015 00:00" data-to="">
    <tr class="big-header">
      <th colspan="3">Route</th>
      <th colspan="2">Closed Stop</th>
      <th colspan="2">Board At</th>
      <th scope="col">Reason</th>
      <th colspan="2">When</th>
    </tr>
    <tr class="sub-header">
      <th scope="col" class="ctr">#</th>
      <th scope="col">Name</th>
      <th scope="col">Direction</th>
      <th scope="col" class="ctr">Stop ID</th>
      <th scope="col">Stop Name</th>
      <th scope="col" class="ctr">Stop ID</th>
      <th scope="col">Stop Name</th>
      <th scope="col"></th>
      <th scope="col">From</th>
      <th scope="col">Until</th>
    </tr>
    <tr data-from="*" data-to="">
      <td class="rtIdCol lead">1</td>
      <td>Metric/South Congress</td>
      <td data-id="S">Southbound</td>
      <td class="stIdCol">478</td>
      <td>5900 LAMAR/OLD KOENIG</td>
      <td class="stIdCol">5861</td>
      <td>BRENTWOOD STATION (SB)</td>
      <td>Construction</td>
      <td>01/11 12:00am</td>
      <td>Permanent</td>
    </tr>
    <tr data-from="01/01/2017 04:00" data-to="03/31/2017 04:00">
      <td rowspan=2 class="rtIdCol lead">4</td>
      <td rowspan=2>Montopolis</td>
      <td data-id="E">Eastbound</td>
      <td class="stIdCol">2112</td>
      <td>5TH/GUADALUPE</td>
      <td class="stIdCol">2110</td>
      <td>5TH/NUECES</td>
      <td>Construction</td>
      <td>01/01 04:00am</td>
      <td>03/31 04:00am</td>
    </tr>
    <tr data-from="01/01/2017 04:00" data-to="03/31/2017 04:00">
      <td data-id="W">Westbound</td>
     ...

CSS

table .header-fixed {
  position: fixed;
  top: 0px;
  /*left: 0;*/
  /*right: 0;*/
  z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
}
/*.table-bordered td {
    font-size: 200% !important;
}*/

JavaScript

$(function() {

var closeListTable = jQuery("table");
var thead = closeListTable.find("thead");
var thRows =  closeListTable.find("tr:has(th)");

if (thead.length===0){
    thead = jQuery("<thead></thead>").appendTo(closeListTable);    
}

var copy = thRows.clone(true).appendTo("thead");
thRows.remove();


$( "thead" ).addClass( "header" );
//Table-fix-header
  $.fn.fixedHeader = function (options) {
    var config = {
        topOffset: 0
        //bgColor: 'white'
      };
    if (options) {
      $.extend(config, options);
    }

    return this.each(function () {
      var o = $(this);

      var $win = $(window);
      var $head = $('thead.header', o);
      var isFixed = 0;
      var headTop = $head.length && $head.offset().top - config.topOffset;

      function processScroll() {
        if (!o.is(':visible')) {
          return;
        }
        if ($('thead.header-copy').size()) {
          $('thead.header-copy').width($('thead.header').width());
        }
        var i;
        var scrollTop = $win.scrollTop();
        var t = $head.length && $head.offset().top - config.topOffset;
        if (!isFixed && headTop !== t) {
          headTop = t;
        }
        if (scrollTop >= headTop && !isFixed) {
          isFixed = 1;
        } else if (scrollTop <= headTop && isFixed) {
          isFixed = 0;
        }
        isFixed ? $('thead.header-copy', o).offset({
          left: $head.offset().left
        }).removeClass('hide') : $('thead.header-copy', o).addClass('hide');
      }
      $win.on('scroll', processScroll);

      // hack sad times - holdover until rewrite for 2.1
      $head.on('click', function () {
        if (!isFixed) {
          setTimeout(function () {
            $win.scrollTop($win.scrollTop() - 47);
          }, 10);
        }
      });

      $head.clone().removeClass('header').addClass('header-copy header-fixed').appendTo(o);
      var header_width = $head.width();
      o.find('thead.header-copy').width(header_width);
     ...