Hey community,
I want to create my own table resizer. I know that there are some plugins that are doing exactly this but I would like to create my own one. :)
I have created a function, which is called in the onloadHandler and which append a div to each th-element of a given table. The method looks like this:
function initializeTableFeatures(){
jQuery.each($("#table > table > thead > tr > th"), function() {
if(this.id !== ""){
var div = createDiv($(this).outerHeight());
$(this).append($(div));
$(this).css('position','relative');
setListeners(div);
this.width = $(this).outerWidth()
console.log(div)
}
});
}
The function "createDiv()" does this:
function createDiv(tableHeight){
var div = document.createElement('div');
$(div).css('top','0');
$(div).css('right','0');
$(div).css('width','2px');
$(div).css('position','absolute');
$(div).css('cursor','col-resize');
$(div).css('userSelect','none');
$(div).css('height',tableHeight + 'px');
return div;
}
This is working perfectly then entering the page. The problem is that the table can be multi-paged. So tthe table is splitted into multiple pages. On each page change the method refreshTable() is called. This method executes refreshContents() on the table.
I tried to add my initializeTableFeatures() function after the call of refreshContents(), but it didnt work. I thought that the table isnt fully loaded when calling my initializeTableFeatures(). Due to this I added a setTimeout() for this function but it didnt work either.
One funny thing is that when I am adding an alert to the refreshTable() function and I am closing this alert, the div are successfully appended to each th-element.
Does anyone know a fix to this problem?
Thanks in advance
