· Apr 7, 2021

Add div programmatically to th-element after refreshContents()

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( !== ""){
              var div createDiv($(this).outerHeight());
              this.width $(this).outerWidth()




The function "createDiv()" does this:

function createDiv(tableHeight){
    var div document.createElement('div');
    $(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

Product version: Caché 2017.1
Discussion (1)0
Log in or sign up to continue