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