событие завершения отрисовки таблицы

[alexsum]

Есть таблица, в которую динамически добавляются строки, соответственно может меняться ширина колонок.
Есть вторая таблица, которая представляет собой полную копию заголовка первой. (в т.ч. размеры)
Как отследить изменение ширины колонок первой для применения размеров во второй.
Интересует само событие, все остальное реализовано.
Если запускать функцию выравнивания размеров в функции обновления первой таблицы (добавление/изменение/удаление строк) то она отрабатывает по старым размерам.

[рони]

alexsum,
вот что димнамически строки добавляет в первую то пусть и вторую таблицу корректирует.

[alexsum]

рони,
так и есть, но, похоже, пока таблица не выведется (отрисуется), ширина столбцов не меняется. При "вот что димнамически строки добавляет в первую то пусть и вторую таблицу корректирует" размеры берутся еще старые

[laimas]

Интересует само событие

http://frontender.info/mutation-observers-tutorial/

[рони]

alexsum,

function addData() {
   //здесь изменили 1 таблицу
  window.setTimeout(function () {
   //здесь получили размер первой и изменили вторую
},0)

}

[alexsum]

рони,
с таймером не получится потому как может быть и 1000 записей и медленное железо, т.е. записи обработались, сработал выравниватель, а уже потом пошел вывод и реальное изменение ширины

[рони]

alexsum,
вам виднее

[alexsum]

laimas,
то-же, что и с таймаутом

[laimas]

то-же, что и с таймаутом

Значит не смогли применить должным образом.

[alexsum]

// setFixedTableHeader(name) создает клон заголовка таблицы
// resetFixedTableHeader(name) обновляет клон заголовка после обновления основной таблицы
// clearFixedTableHeader(name) удаляет клон заголовка таблицы

function setFixedTableHeader(name){
	var newthead="";
	if(! $("#"+name+"_topdiv").length){
		$("#"+name).wrap("<div style=\"overflow: auto; height:100%; width:100%;\" id=\""+name+"_topdiv\" ></div>");
	}
	if($("#"+name+"_thd").length){
		$("#"+name+"_thd").remove();
	}
	var zindex=$("#"+name).css("z-index");
	if(isNaN(zindex)){
		zindex=1;
	}else{
		zindex++;
	}
	$("#"+name).before("<table style=\"background-color:white;z-index:"+zindex+";position:fixed;width:"+$("#"+name).width()+"px\" id='"+name+"_thd'><thead></thead></table>");
	if(! $("#"+name+"_topdiv1").length){
		$("#"+name).wrap("<div style=\"overflow: auto; height:100%; width:100%;overflow-y: scroll;\" id=\""+name+"_topdiv1\" ></div>");
	}
	$('#'+name+' thead th').each(function(){
		var stlh=$(this).attr("style");
		if(typeof stlh !== "undefined"){
			stlo=' stlh="'+stlh+'" ';
		}else{
			stlo="";
			stlh="";
		}
		var cls=$(this).attr("class");
		if(typeof cls === "undefined"){
			cls="";
		}
		var ids=$(this).attr("id");
		if(typeof ids !== "undefined"){
			ids=' id="'+ids+'" ';
		}else{ids="";}
		var names=$(this).attr("name");
		if(typeof names !== "undefined"){
			names=' name="'+names+'" ';
		}else{names="";}
		
		newthead=$("<th "+ids+names+" style=\"/*border:1px solid white;*/"+stlh+";width:"+ $(this).width()+"px;height:"+$(this).height()+"px;\" "+stlo+">"+$(this).text()+"</th>");
		newthead=$("<th "+ids+names+" style=\"/*border:1px solid grey;*/"+stlh+";width:"+ $(this).width()+"px;/*height:"+$(this).height()+"px;*/\" "+stlo+">"+$(this).text()+"</th>");
		$('#'+name+'_thd thead').append(newthead);
		if(cls.length>0){
			newthead.addClass(cls);
		}
	});
	$("#"+name+"_thd").css("top",$("#"+name).css("top"));
	$("#"+name).css({
		position: "relative"
	});

	var $viewport = $(window); 

	$viewport.scroll(function(){
		FTHsetOffset(name);
	});	
	
	$( window ).resize(function() {
		clearTimeout(FTHdoit);
		FTHdoit=setTimeout(resetFixedTableHeader(name),150);
	});	

	FTHsetOffset(name);		
	
	if(!$("#resetfixsedtablediv").length){
		$("body").prepend("<div style='display:none' id='resetfixsedtablediv'></div>");
		addObserverIfDesiredNodeAvailable();
	}
}

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;


var composeObserver = new MutationObserver(function(mutations) { 
	mutations.forEach(function(mutation) {	
	});
	refreshTimer();
});
		
function refreshTimer(){
	$("#resetfixsedtablediv div").each(function(){
		resetFTH($(this).attr('refresh'));
		console.log('rfth '+$(this).attr('refresh'));
		$(this).remove();
	});			
}
		
function addObserverIfDesiredNodeAvailable() {
	var composeBox = document.querySelector('#resetfixsedtablediv');
	if(!composeBox) {
		window.setTimeout(addObserverIfDesiredNodeAvailable,500);
		return;
	}
	var config = {
			attributes: false, 
			childList: true, 
			characterData: false 
		};
	composeObserver.observe(composeBox,config);
}		


var FTHdoit;

function FTHsetOffset(name){
	if($("#"+name+"_thd").length){
		var left=$("#"+name+"_thd").parent().offset().left;
		var top=$("#"+name+"_thd").parent().offset().top;//+ $("#"+name).position().top - $("#"+name+"_thd").height();;
		var st=$('html,body').scrollTop();
		if(st==0){
			st=$('body').scrollTop();
		}
		var ctop=-st + top;
		ctop=$("#"+name+"_topdiv").offset().top-st;
		if(ctop<0){ctop=0;}
		if(top + $("#"+name+"_thd").parent().height()-$("#"+name+"_thd").height()<(st)){ctop=-top;}

		$("#"+name+"_thd").css({
			left: -$(this).scrollLeft() + left,
			top: ctop
		});
	}
}
function clearFixedTableHeader(name){
	$("#"+name+"_thd thead th").each(function(index,value){
		$("#"+name+" thead th:eq("+index+")").text($(value).text());
	});
	$("#"+name+"_thd").remove();
}


function resetFixedTableHeader(name){
	var doit=true;
	$("#resetfixsedtablediv div").each(function(){
		if($(this).attr('refresh')==name) doid=false;
	});	
	if(doit)
		$("#resetfixsedtablediv").append("<div refresh='"+name+"'></div>");
}


function resetFTH(name){
	$("#"+name+"_thd").hide();
	$("#"+name+"_thd").width($("#"+name).width());
	$("#"+name+" thead th").each(function(index,value){
		$("#"+name+"_thd thead th:eq("+index+")").html($(value).html());
		$("#"+name+"_thd thead th:eq("+index+")").width($(value).width());
		$("#"+name+"_thd thead th:eq("+index+")").height($(value).height());
	});			
	FTHsetOffset(name);	
	$("#"+name+"_thd").show();
}

где-то так. так и не работает