I am attempting to adjust the header and columns, as well as change their background color in a Table using JQuery. I have generated the table in JQuery from some JSON data.
I have experimented with the 'translate()' function to lock them into place.
var translate = "translate(5px,0)";"This method helps me fix the column or header, however, the main issue arises when I scroll horizontally first and then vertically; the first <th/> of the header scrolls while the rest stay fixed (refer to the output image mentioned in the question)."
Allow me to share the code:
HTML:
This is my HTML where I call 'MyJS' from <script/>.
<div class="row" >
<div class="tblMain" id="tblMainDiv">
</div>
</div>
<script>
$("#tblMainDiv").MyJS({
Data: data.Data,
ColoredColumns:["Sarika"]
});
<script/>
JS:
'_params' stand for the parameters and '_params.Data' represents the Json data of the table. '_myTableTr' refers to the tr of the table.
var _collection = JSON.parse(_params.Data);
var _myTableColumns = [];
var _collection = JSON.parse(_params.Data); // Parsing the Json Data.
for (var i in _collection[0]) {
_myTableColumns.push(i); // grabbing column headers and pushing them into the collection.
}
// Adding table heads
if (_myTableColumns.length > 0) {
for (var i = 0; i < _myTableColumns.length; i++) {
var _myTableTh= document.createElement("th");
_myTableTh.innerHTML = _myTableColumns[i];
_headerTr.appendChild(_myTableTh);
}
}
// adding table data
for (var i = 0; i < _collection.length; i++) {
_myTableTr = _myDatatable.insertRow(-1);
for (var j = 0; j < _myTableColumns.length; j++) {
var cell = _myTableTr.insertCell(-1);
cell.innerHTML = _collection[i][_myTableColumns[j]];
}
}
And here's the code for Freezing:
Here, I am attempting to fix only the first column, but eventually, I may want to fix multiple random columns.
//For Header and Specific columns to be fixed .
var lastPosY = 0;
var lastPosX = 0;
$("#"+$(this).attr('id')).scroll(function () {
var currPosX = this.scrollLeft; // get current position of Column.
var currPosY = this.scrollTop;
if (lastPosY != currPosY && (lastPosY > 0 || currPosY > 0)) {
$('#tblMyDataTable' + $(this).attr('id') + ' thead th:first-child').removeAttr('style');
var translate = "translate(0," + (this.scrollTop) + "px)"; // getting translate pixels based on the current position of the bar
$($('#tblMyDataTable' + $(this).attr('id')).find("thead").eq(0)).css('transform', translate);
}
else {
translate = "translate(" + (this.scrollLeft) + "px,0)";
if (lastPosX != currPosX) {
$('#tblMyDataTable' + $(this).attr('id') + ' thead th:first-child').css('transform', translate);
$('#tblMyDataTable' + $(this).attr('id')+ 'tbodytrtd:first-child').css('transform', translate);
}
}
lastPosX = currPosX;
lastPosY = currPosY;
});
CSS:
.myDataTable {
width: 100%;
overflow-x: scroll;
border-collapse: separate !important;
border: 1px solid #000;}
.tblMain {
margin:20px;}
.myDataTable > tbody > tr:nth-child(even)>td {
background-color: #e6e6e6;}
.myDataTable > tbody > tr:nth-child(odd) > td {
background-color: #fff;}
.tblMain {
height: 50vh;
overflow-y: auto;}
The Output I Am Getting: https://i.sstatic.net/Ax4Fk.jpg
Please assist me in resolving this issue and changing the background color of the fixed elements. Thank you.