Hello , i have made html table that loads more results on page scroll.
Now i m making fixed table header.
But when new content loads rows changes sizes and header are not same width as
I m wondering is there a way to make it auto resizeing when needed??
my script
$(document).ready(function(){
var tableOffset = $("#ccolor").offset().top;
var $header = $("#ccolor > thead");
var $fixedHeader = $("#header-fixed").append($header.clone());
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
$.each($header.find('tr > th'), function(ind,val){
var original_width = $(val).width();
$($fixedHeader.find('tr > th')[ind]).width(original_width);
});
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
});
Funny is that if i scroll to top fixed header is correct until again new data is loaded
PaulOB
August 2, 2017, 12:47pm
3
I think you would get more response to the question if you could show a working example for people to play with
JS isn’t my area but it looks to me as though you are pulling the ‘thead’ from the table and placing it in another div (or table element) and therefore no longer maintains a relationship between the data in the original table. When you add new data the ‘thead’ would need to be re-sized at the same time to show the new format.
You’d probably need to incorporate the following from the above code when you add new data.
$.each($header.find('tr > th'), function(ind,val){
var original_width = $(val).width();
$($fixedHeader.find('tr > th')[ind]).width(original_width);
});
If you can post a working copy I;m sure one of the JS experts here can help you further.
2 Likes
@PaulOB i know working example would be the best but i m not that good at JS to make such a demo
@PaulOB i actually made demo of working example!But it works perfectly as there are no new content added!
PaulOB
August 4, 2017, 1:36pm
6
As I mentioned in my first post you are creating a separate header for the table so you will need to update its widths to match the real table every time you add new content or indeed when you resize the page. At the moment your demo is broken because if I resize the window the header does not keep track.
That means you also need to include the ‘resize event’ in your script along with the scroll event and if the header is fixed run the code that sets up the widths.
It also follows that you will need to do the same in your script that is adding new data and when you add new data you want to trigger your fixed header code again. If you do not have access to your original script or it is too complex then I guess you will need to detect when something in the table has changed and then make sure your header script is run again.
You didn’t show the script you are using to add more results so its hard to say how easy it would be to modify it. That’s one of the reasons we ask for a working example as we can only do so much without the real code to work with
The above is probably too advanced for me to work out anyway but I’m sure if you post all scripts and html then someone like @m3g4p0p will be able to help
1 Like
PaulOB
August 4, 2017, 4:10pm
7
This is probably complete nonsense but it may help you find a solution
If you click the table a row is added and you can see the fixed header cell resize accordingly.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1{text-align:center;}
html,body{margin:0;padding:0}
body {
height: 100%;
}
#header-fixed {
position: fixed;
top: 35px;
display:none;
background-color:white;
left:0;right:0;
background:#ccc;
}
table{margin:auto;width:100%;max-width:960px;}
th,td{text-align:left;border:1px solid red;}
</style>
</head>
<body>
<h1>Testing (click table to add a new row)</h1>
<table id="ccolor" class="ui small celled sortable table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody id="results">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>bsadasdasdsadsa with more </td>
<td>c</td>
</tr>
</tbody>
</table>
<table id="header-fixed" class="ui small celled sortable table">
</table>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var counter = 1;
var tableOffset = $("#ccolor").offset().top;
var $header = $("#ccolor > thead");
var $fixedHeader = $("#header-fixed").append($header.clone());
jQuery('#ccolor').click(function(event) {
event.preventDefault();
var newRow = jQuery('<tr><td>add</td><td>add</td><td>addadd addaddaddad daddaddad daddaddadda ddaddaddad dadda ddaddaddad da dda ddadd</td></tr>');
counter++;
jQuery('#ccolor').append(newRow);
});
$(window).bind("scroll resize", function(e) {
var offset = $(this).scrollTop();
if (e.type === "resize" && $fixedHeader.is(":visible")) {
resizeCells();
return;
}
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
resizeCells();
} else if (offset < tableOffset) {
$fixedHeader.hide();
}
function resizeCells() {
$.each($header.find('tr > th'), function(ind, val) {
var original_width = $(val).width();
$($fixedHeader.find('tr > th')[ind]).width(original_width);
});
}
});
// The node to be monitored
var target = $("#ccolor")[0];
// Create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var newNodes = mutation.addedNodes; // DOM NodeList
if (newNodes !== null) { // If there are new nodes added
if (mutation.type === 'childList') {
$(window).trigger('resize');
}
}
});
});
// Configuration of the observer:
var config = {
attributes: true,
childList: true,
characterData: true,
subtree: true
};
// Pass in the target node, as well as the observer options
observer.observe(target, config);
});
</script>
</body>
</html>
It’s probably completely the wrong way to do it but I had fun playing around
2 Likes
@PaulOB You are the best
1 Like
system
November 7, 2017, 7:03pm
10
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
