How to fix header at dynamically table which build by jQuery

Question

I work with a table, which is built dynamically, and I have a problem.

The table is scrollable, and columns and row are built dynamically, and I want to fix header so just table body is scrollable.

I tried to use some methods but it does not work for me:

var templateName = ["Name", "Value", "Upper", "Lower", "Description"];
var mockData = [{
    "Name": "Working heads quantity",
    "Value": "12",
    "Upper": "-",
    "Lower": "-",
    "New col": "test",
    "Description": "Some Description here"
  },
  {
    "Name": "Upper thread tension",
    "Value": "-",
    "Upper": "210 +/- 10",
    "Lower": "20 +/- 5",
    "Description": "Some Description here"
  },
  {
    "Name": "Botom thread tension",
    "Value": "-",
    "Upper": "55 +/- 5",
    "Lower": "55 +/- 5",
    "Description": "Some Description here"
  },
  {
    "Name": "Frames per 1 spool",
    "Value": "5",
    "Upper": "-",
    "Lower": "-",
    "Description": "Some Description here"
  },
  {
    "Name": "Type",
    "Value": "1",
    "Upper": "-",
    "Lower": "-",
    "Description": "Some Description here"
  },
  {
    "Name": "Speed",
    "Value": "300",
    "Upper": "-",
    "Lower": "-",
    "Description": "Some Description here"
  },
  {
    "Name": "Tracing",
    "Value": "64",
    "Upper": "-",
    "Lower": "-",
    "Description": "Some Description here"
  },
  {
    "Name": "Tracing",
    "Value": "64",
    "Upper": "-",
    "Lower": "-",
    "Description": "Some Description here"
  },
  {
    "Name": "Tracing",
    "Value": "64",
    "Upper": "-",
    "Lower": "-",
    "Description": "Some Description here"
  }

];

function buildHtmlTable() {
  var columns = addAllColumnHeaders(mockData, '#parameter-table');

  for (var i = 0; i < mockData.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = mockData[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td/>').html(cellValue));
    }
    $('#parameter-table').append(row$);
  }
}

function addAllColumnHeaders(data, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < data.length; i++) {
    var rowHash = data[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}

buildHtmlTable();

#scrolltable {
  margin-top: 10px;
  width: 100%;
  height: 500px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;
}

#scrolltable th div {
  position: absolute;
  margin-top: -20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="scrolltable">
  <table id="parameter-table">
    <thead id="table-header-parameter" class="header">
    </thead>
    <tbody id="table-body-data"></tbody>
  </table>
</div>

So i wiil try to explain one more time.

I build table from jQuery script, and header build like row, and maybe because lot of scripts not working for me.

@Tyddlywink i insert this code $("#table-header-parameter").freezeHeader(); in to function addAllColumnHeaders — qunz666, Jul 15 '19 at 08:10
It's an old library that uses an old Jquery library. I'm going to remove my comment. But have you looked at https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque — Tyddlywink, Jul 15 '19 at 08:20
@Tyddlywink yes i try to implement this function, but again it's not work for me. Maybe bacause header build like row — qunz666, Jul 15 '19 at 08:22
Try this then. It keeps your header in the body and freezes just the top row of the tbody element. https://jsfiddle.net/tyddlywink/q1708mtc/ — Tyddlywink, Jul 15 '19 at 08:50

How to fix header at dynamically table which build by jQuery

0 Answers0