U table ajax js

SE/se-lib/TableAjax.php.TableAjax.js

@@ -31,7 +31,7 @@ if (!String.prototype.startsWith) { // TODO: to global js utils
 		return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
 	};
 }
-p5WfsRefFilter = (function () { // convert GET param key ogc filter for ref
+var p5WfsRefFilter = (function () { // convert GET param key ogc filter for ref
 	return {
 		parse: function (filterKey) {
 			if (filterKey.startsWith('Ref_From_')) return { type: 'From', idInstance: filterKey.substr('Ref_From_'.length) };
@@ -750,11 +750,11 @@ var TableAjax = function() {
 	};
 
 	var _reactUITableNode; // TODO: react table node
-	var _uiNodeCont; // container holding table
+	var _uiMainContainerNode; // container holding table
 	var _uiNodeSelectedInfo;
 	var _uiNodeSpecialFilters;
 	var _uiNodeFooterInfo;
-	var _uiNode$Table; // the table node
+	var _uiNode$Table; // the table jQuery node
 	var _head; // table header
 	var _headSort; // table header sorting row
 	var _headFilter; // table header columns filter row
@@ -785,15 +785,15 @@ var TableAjax = function() {
 	 initialize the plugin.
 	 */
 	priv.init = function() {
-		_uiNodeCont = priv.options.id; // <div id="{_htmlID}" style="..."><table class="AjaxTable...
+		_uiMainContainerNode = priv.options.mainContainerNode; // <div id="{_htmlID}" style="..."><table class="AjaxTable...
 		_state = {};// init state
 		_state.page = 1;
 		_state.specialFilters = {};
 		{ // init events
-			jQuery(_uiNodeCont).on('TableAjax:render', priv.onRender);
+			jQuery(_uiMainContainerNode).on('TableAjax:render', priv.onRender);
 			jQuery(window).on('resize', priv.onWindowResize)
 		}
-		priv.initialRender();// set up _uiNode$...
+		priv.initialRender();// set up _uiNode$Table, ...
 		priv.options.types.string = ((priv.options.types || {}).string || {});
 		priv.options.types.number = ((priv.options.types || {}).number || {});
 		priv.options.types.bool = ((priv.options.types || {}).bool || {});
@@ -1007,17 +1007,17 @@ var TableAjax = function() {
 		var stickyCol1Width = priv.getStickyCol1Width();
 		var stickyCol2Width = priv.getStickyCol2Width();
 		var stickyCol3Width = priv.getStickyCol3Width();
-		var contW = jQuery(_uiNodeCont).parent().width();
+		var contW = jQuery(_uiMainContainerNode).parent().width();
 		var colsW = stickyCol1Width + stickyCol2Width + stickyCol3Width;
-		jQuery(_uiNodeCont).css({width:'' + (contW - colsW) + 'px'})//, marginLeft:'' + colsW + 'px', overflowX:'scroll', overflowY:'visible', paddingBottom:'1px'});
+		jQuery(_uiMainContainerNode).css({width:'' + (contW - colsW) + 'px'})//, marginLeft:'' + colsW + 'px', overflowX:'scroll', overflowY:'visible', paddingBottom:'1px'});
 
 		var wh = jQuery(window).height(); // returns height of browser viewport
 		var dh = jQuery(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
 		if (dh > wh) {
-			jQuery(_uiNodeCont).doubleScroll()
-			jQuery(_uiNodeCont).prev('.doubleScroll-scroll-wrapper').css({float: 'right', display:'block'})
+			jQuery(_uiMainContainerNode).doubleScroll()
+			jQuery(_uiMainContainerNode).prev('.doubleScroll-scroll-wrapper').css({float: 'right', display:'block'})
 		} else {
-			jQuery(_uiNodeCont).prev('.doubleScroll-scroll-wrapper').css({display:'none'})
+			jQuery(_uiMainContainerNode).prev('.doubleScroll-scroll-wrapper').css({display:'none'})
 		}
 	}
 	priv.uiFixStickyCols = function () {
@@ -1026,14 +1026,14 @@ var TableAjax = function() {
 		var stickyCol3Width = priv.getStickyCol3Width();
 		if (undefined === _tableWidth) {
 			_tableWidth = true;
-			var contW = jQuery(_uiNodeCont).width();
+			var contW = jQuery(_uiMainContainerNode).width();
 			var th1 = _uiNode$Table.find('.stickyCol1:first');
 			var th2 = th1.next();
 			var th1W = th1.innerWidth();
 			var th2W = 50 + 2 * 5;//th2.innerWidth();
 			// var colsW = stickyCol1Width + stickyCol2Width + stickyCol3Width;
 			var colsW = priv.getStickyColsSumWidth();
-			jQuery(_uiNodeCont).css({
+			jQuery(_uiMainContainerNode).css({
 				width: '' + (contW - colsW) + 'px',
 				marginLeft: '' + colsW + 'px',
 				minHeight:  '360px',
@@ -1084,7 +1084,7 @@ var TableAjax = function() {
 		_reactUITableNode = document.createElement('div')
 		if (!isVisible) _reactUITableNode.style.display = 'none';
 		_reactUITableNode.setAttribute('class', "TableAjax-reactUITableNode");
-		_uiNodeCont.parentNode.appendChild(_reactUITableNode);
+		_uiMainContainerNode.parentNode.appendChild(_reactUITableNode);
 		ReactDOM.render(
 			h(p5UI__TableAjaxWidget, {
 				namespace: priv.options.namespace,
@@ -1100,24 +1100,44 @@ var TableAjax = function() {
 	};
 
 	priv.initialRender = function() {
-		_uiNode$Table = $('<table class="AjaxTable table table-striped table-hover table-bordered table-condensed"></table>').appendTo(_uiNodeCont);
+		/**
+			 <topWrap /> <!-- @selected | filters -->
+			 <afterTopWrap /> <!-- for clear:both, border and padding -->
+			 <_uiMainContainerNode>
+				<_uiNode$Table>
+					<_head>
+						<_headSort />
+						<_headFilter />
+					</_head>
+					<_bodyNode />
+					<tfoot /> <!-- @todo: empty? not used? -->
+				</_uiNode$Table>
+			</_uiMainContainerNode>
+			<_foot /> <!-- @class="foot tblAjax__footer": total | pagination | ui table functions -->
+			<tblAjax__inlineEditBox/>
+			<_mapEditorWrap />
+			<_popoverCell />
+		 */
+		_uiNode$Table = $('<table class="AjaxTable table table-striped table-hover table-bordered table-condensed"></table>').appendTo(_uiMainContainerNode);
 			_head = $('<thead></thead>').prependTo(_uiNode$Table);
 				_headSort = $('<tr class="sort tblAjax__head__sort"></tr>').prependTo(_head);
 				_headFilter = $('<tr class="filter tblAjax__head__filter"></tr>').appendTo(_head);
 			_bodyNode = $('<tbody></tbody>').insertAfter(_head);
 		$('<tfoot></tfoot>').insertAfter(_bodyNode);
-		_foot = $('<div class="foot tblAjax__footer" style="margin:0; padding:12px; border-top:1px solid #ddd; border-bottom:1px solid #ddd"></div>').insertAfter(_uiNodeCont);
-		var footToolbar = $('<div class="btn-toolbar tblAjax__footer__toolbar" style="margin:0"></div>').appendTo(_foot);
-		_uiNodeFooterInfo = document.createElement('div') // .tblAjax__head__specialFilter
-		_uiNodeFooterInfo.setAttribute('class', "tblAjax__footer__toolbar__info foot-info");
-		_uiNodeFooterInfo.style.float = "left";
-		_uiNodeFooterInfo.style.padding = "0 20px 0 0";
-		$(_uiNodeFooterInfo).appendTo(footToolbar);
-		$('<span class="tblAjax__footer__toolbar__pagination"></span>').appendTo(footToolbar);
-		$('<span class="tblAjax__footer__toolbar__pagesizes"></span>').appendTo(footToolbar);
-		$('<span class="tblAjax__footer__toolbar__columnPicker"></span>').appendTo(footToolbar);
-		$('<span class="tblAjax__footer__toolbar__functions"></span>').appendTo(footToolbar);
-		$('<span class="tblAjax__footer__toolbar__export"></span>').appendTo(footToolbar);
+		_foot = $('<div class="foot tblAjax__footer" style="margin:0; padding:12px; border-top:1px solid #ddd; border-bottom:1px solid #ddd"></div>').insertAfter(_uiMainContainerNode);
+		{
+			var footToolbar = $('<div class="btn-toolbar tblAjax__footer__toolbar" style="margin:0"></div>').appendTo(_foot);
+			_uiNodeFooterInfo = document.createElement('div') // .tblAjax__head__specialFilter
+			_uiNodeFooterInfo.setAttribute('class', "tblAjax__footer__toolbar__info foot-info");
+			_uiNodeFooterInfo.style.float = "left";
+			_uiNodeFooterInfo.style.padding = "0 20px 0 0";
+			$(_uiNodeFooterInfo).appendTo(footToolbar);
+			$('<span class="tblAjax__footer__toolbar__pagination"></span>').appendTo(footToolbar);
+			$('<span class="tblAjax__footer__toolbar__pagesizes"></span>').appendTo(footToolbar);
+			$('<span class="tblAjax__footer__toolbar__columnPicker"></span>').appendTo(footToolbar);
+			$('<span class="tblAjax__footer__toolbar__functions"></span>').appendTo(footToolbar);
+			$('<span class="tblAjax__footer__toolbar__export"></span>').appendTo(footToolbar);
+		}
 		_mapEditorWrap = $('<div class="mapEditor" style="display:none"></div>').insertAfter(_foot);
 			_mapEditor = $('<div class="mapEditor-map"></div>').appendTo(_mapEditorWrap);
 		_popoverCell = $('<div class="popoverCell" style="display:none"></div>').insertAfter(_foot);
@@ -1125,25 +1145,31 @@ var TableAjax = function() {
 		_uiNodeSelectedInfo = document.createElement('div')
 		_uiNodeSpecialFilters = document.createElement('div') // .tblAjax__head__specialFilter
 		var topWrap = document.createElement('div')
-		var topLeftWrap = document.createElement('div')
-		var topRightWrap = document.createElement('div')
-		topWrap.appendChild(topLeftWrap)
-		topWrap.appendChild(topRightWrap)
-		topWrap.style.padding = '12px 0'
-		topWrap.style.borderTop = '1px solid #ddd'
-		topLeftWrap.style.width = '' + priv.getStickyColsSumWidth() + 'px'
-		topLeftWrap.style.float = 'left'
-		topLeftWrap.style.fontSize = '12px'
-		topLeftWrap.style.lineHeight = '22px'
-		topRightWrap.style.float = 'left'
-		topLeftWrap.appendChild(_uiNodeSelectedInfo)
-		topRightWrap.appendChild(_uiNodeSpecialFilters)
-		_uiNodeCont.parentNode.insertBefore(topWrap, _uiNodeCont)
+		{
+			var topLeftWrap = document.createElement('div')
+			var topRightWrap = document.createElement('div')
+			topWrap.setAttribute('p5_node_name', "topWrap")
+			topWrap.appendChild(topLeftWrap)
+			topWrap.appendChild(topRightWrap)
+			topWrap.style.padding = '12px 0'
+			topWrap.style.borderTop = '1px solid #ddd'
+			topLeftWrap.style.width = '' + priv.getStickyColsSumWidth() + 'px'
+			topLeftWrap.style.float = 'left'
+			topLeftWrap.style.fontSize = '12px'
+			topLeftWrap.style.lineHeight = '22px'
+			topRightWrap.style.float = 'left'
+			topLeftWrap.appendChild(_uiNodeSelectedInfo)
+			topRightWrap.appendChild(_uiNodeSpecialFilters)
+		}
+		_uiMainContainerNode.parentNode.insertBefore(topWrap, _uiMainContainerNode)
 		var afterTopWrap = document.createElement('div')
-		afterTopWrap.style.paddingTop = '12px'
-		afterTopWrap.style.borderBottom = '1px solid #ddd'
-		afterTopWrap.style.clear = 'both'
-		_uiNodeCont.parentNode.insertBefore(afterTopWrap, _uiNodeCont)
+		{
+			afterTopWrap.setAttribute('p5_node_name', "afterTopWrap")
+			afterTopWrap.style.paddingTop = '12px'
+			afterTopWrap.style.borderBottom = '1px solid #ddd'
+			afterTopWrap.style.clear = 'both'
+		}
+		_uiMainContainerNode.parentNode.insertBefore(afterTopWrap, _uiMainContainerNode)
 
 		priv.renderInlineEditBox();// .tblAjax__inlineEditBox
 
@@ -1197,7 +1223,7 @@ var TableAjax = function() {
 			priv.renderTableTfoot();
 			priv.renderFooter();
 		}
-		_foot = $(_uiNodeCont).next('.foot');
+		_foot = $(_uiMainContainerNode).next('.foot');
 
 		priv.uiFixStickyCols();
 
@@ -2137,7 +2163,7 @@ var TableAjax = function() {
 	priv.renderTableTfoot = function() {
 		_uiNode$Table.find('tfoot').remove();
 		_foot = $('<tfoot></tfoot>').insertAfter(_bodyNode);
-		//$(_uiNodeCont).next('.foot').replaceWith(_foot);
+		//$(_uiMainContainerNode).next('.foot').replaceWith(_foot);
 	};
 
 	priv.renderFooter = function() {
@@ -2184,7 +2210,7 @@ var TableAjax = function() {
 	};
 	priv.renderFooterPagination = function() {
 		var nodeClass = 'tblAjax__' + 'footer__toolbar__pagination',
-				currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
+				currentNode = $(_uiMainContainerNode).next('.foot').find('.' + nodeClass),
 				node;
 		var currPage = _state.page;
 		if (priv.options.debug || DBG) console.log('Render: ', nodeClass, '_data.total', _data.total, 'currPage', currPage);
@@ -2248,7 +2274,7 @@ var TableAjax = function() {
 	};
 	priv.renderFooterPageSizes = function() {
 		var nodeClass = 'tblAjax__' + 'footer__toolbar__pagesizes',
-				currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
+				currentNode = $(_uiMainContainerNode).next('.foot').find('.' + nodeClass),
 				node;
 		if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
 		if (priv.options.pageSizes.length > 0) {
@@ -2273,7 +2299,7 @@ var TableAjax = function() {
 	};
 	priv.renderFooterColumnPicker = function() {
 		var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
-				currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
+				currentNode = $(_uiMainContainerNode).next('.foot').find('.' + nodeClass),
 				node;
 		if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
 		if (priv.options.columnPicker) {
@@ -2317,7 +2343,7 @@ var TableAjax = function() {
 	};
 	priv.renderFooterFunctions = function() {
 		var nodeClass = 'tblAjax__' + 'footer__toolbar__functions',
-				currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
+				currentNode = $(_uiMainContainerNode).next('.foot').find('.' + nodeClass),
 				node;
 		if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
 		if (priv.options.tblFunctions) {
@@ -2342,7 +2368,7 @@ var TableAjax = function() {
 	};
 	priv.renderFooterExport = function() {
 		var nodeClass = 'tblAjax__' + 'footer__toolbar__export',
-				currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
+				currentNode = $(_uiMainContainerNode).next('.foot').find('.' + nodeClass),
 				node;
 		if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
 		if (priv.options.exportFields && priv.options.exportFields.length) {
@@ -2383,7 +2409,7 @@ var TableAjax = function() {
 
 	priv.renderInlineEditBox = function() {
 		var nodeClass = 'tblAjax__' + 'inlineEditBox',
-				currentNode = $(_uiNodeCont).parent().children('.' + nodeClass),
+				currentNode = $(_uiMainContainerNode).parent().children('.' + nodeClass),
 				node;
 		var node = $('<div class="' + nodeClass + ' modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>');
 		var modalWrap = $('<div class="modal-dialog"></div>').appendTo(node);
@@ -2402,7 +2428,7 @@ var TableAjax = function() {
 		var iebBtnSave = $('<input type="submit" value="Zapisz" class="btn btn-primary btn-save">').appendTo(iebFoot);
 
 		frmInlineEdit.on('submit', function() {
-			var inlineEditBox$Node = $(_uiNodeCont).parent().children('.tblAjax__inlineEditBox');
+			var inlineEditBox$Node = $(_uiMainContainerNode).parent().children('.tblAjax__inlineEditBox');
 			var data = inlineEditBox$Node.find('form').serialize();
 			inlineEditBox$Node.find('.inlineEditBox-cnt').html('<span class="loading-info"> loading ...</span>');
 			function notifyAjaxCallback(data) {
@@ -2558,7 +2584,7 @@ var TableAjax = function() {
 			'Jeśli problem się powtarza, spróbuj ' +
 		'</div>')
 		msgNode.append(clearAllFiltersBtn);
-		jQuery(_uiNodeCont).prepend(msgNode);
+		jQuery(_uiMainContainerNode).prepend(msgNode);
 	}
 
 	/*
@@ -2663,7 +2689,7 @@ var TableAjax = function() {
 
 		if (renderParts.length > 0) {
 			DBG && console.log('DBG::trigger(TableAjax:render): ', renderParts);
-			jQuery(_uiNodeCont).trigger('TableAjax:render', renderParts);
+			jQuery(_uiMainContainerNode).trigger('TableAjax:render', renderParts);
 		}
 	};
 
@@ -2706,7 +2732,7 @@ var TableAjax = function() {
 				})
 			: []
 		;
-		jQuery(_uiNodeCont).trigger('TableAjax:updateRows', { primaryKeys: listPrimaryKeys });
+		jQuery(_uiMainContainerNode).trigger('TableAjax:updateRows', { primaryKeys: listPrimaryKeys });
 		if (priv.options.checkboxes) {
 			priv.options.selectedStore.dispatch( priv.options.selectedActions.setPrimaryKeys(priv.options.namespace, listPrimaryKeys) );
 		}
@@ -2857,7 +2883,7 @@ var TableAjax = function() {
 		if ('window' == priv.options.mapEditorContainer) {
 			var mapEditor = _mapEditorWrap.children('.mapEditor-map');
 			if (!mapEditor || !mapEditor.length) {
-				var tblCont = jQuery(_uiNodeCont).parent('.AjaxTableCont');
+				var tblCont = jQuery(_uiMainContainerNode).parent('.AjaxTableCont');
 				var mapEditor = tblCont.children('.AjaxTableCont-mapEditorContainer').children('.mapEditor-map');
 				if (!mapEditor || !mapEditor.length) {
 					// TODO: create new map
@@ -2917,7 +2943,7 @@ var TableAjax = function() {
 			var mapEditor = _mapEditorWrap.children('.mapEditor-map');
 			if (mapEditor && mapEditor.length) {// map is inside _mapEditorWrap (window)
 				var mapDockNode = jQuery('<div class="AjaxTableCont-mapEditorContainer"></div>');
-				var tblCont = jQuery(_uiNodeCont).parent('.AjaxTableCont');
+				var tblCont = jQuery(_uiMainContainerNode).parent('.AjaxTableCont');
 				tblCont.children('.AjaxTableCont-mapEditorContainer').remove();
 				var breadcrumb = tblCont.children('.breadcrumb');
 				if (!breadcrumb || !breadcrumb.length) {
@@ -2942,7 +2968,7 @@ var TableAjax = function() {
 				ui.element.children(":first").children(":first").css({display:'block', height: ui.element.height()});
 			});
 		} else if ('destroy' == task) {
-			var mapDockResizable = jQuery(_uiNodeCont).parent('.AjaxTableCont').children('.AjaxTableCont-mapEditorContainer');
+			var mapDockResizable = jQuery(_uiMainContainerNode).parent('.AjaxTableCont').children('.AjaxTableCont-mapEditorContainer');
 			mapDockResizable.resizable('destroy');
 			mapDockResizable.remove();
 		}
@@ -3003,7 +3029,7 @@ var TableAjax = function() {
 
 		publ.loadPage(1, priv.options.pageSize);
 
-		jQuery(_uiNodeCont).trigger('TableAjax:render', ['body', 'foot_pagination']);
+		jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['body', 'foot_pagination']);
 
 		priv.saveProfilePageSize(priv.options.pageSize);
 	};
@@ -3085,7 +3111,7 @@ var TableAjax = function() {
 		priv.saveHiddenCols();
 
 		//_data.cols[column].index = new priv.ext.XDate();
-		jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
+		jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['head', 'body']);
 	};
 
 	priv.modelColFilter_init = function() {// run only once, set _state._modelColFilter {selected, filters: [ {name, label, visibleCols} ]}
@@ -3144,7 +3170,7 @@ var TableAjax = function() {
 								visibleCols: result.data[fltr].split(',')
 							}
 						}))
-						jQuery(_uiNodeCont).trigger('TableAjax:render', ['foot__columnPicker']);
+						jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['foot__columnPicker']);
 					} else {
 						p5UI__notifyAjaxCallback(result)
 					}
@@ -3184,7 +3210,7 @@ var TableAjax = function() {
 						visibleCols: userTableFilters[fltr].split(',')
 					}
 				}))
-				jQuery(_uiNodeCont).trigger('TableAjax:render', ['foot__columnPicker']);
+				jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['foot__columnPicker']);
 			} else {
 				p5UI__notifyAjaxCallback(result)
 			}
@@ -3257,7 +3283,7 @@ var TableAjax = function() {
 					visibleCols: userTableFilters[fltr].split(',')
 				}
 			}))
-			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
+			jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
 		}).catch(function(e) {
 			// eg. hit Cancel
 		})
@@ -3302,13 +3328,13 @@ var TableAjax = function() {
 	};
 	priv.modelColFilter_uiUncheckAllColFilters = function() {
 		var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
-				currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass)
+				currentNode = $(_uiMainContainerNode).next('.foot').find('.' + nodeClass)
 		;
 		currentNode.find('input[type="radio"]').prop("checked", false);
 	};
 	priv.modelColFilter_uiCheckColFilter = function(filterKey) {
 		var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
-				currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass)
+				currentNode = $(_uiMainContainerNode).next('.foot').find('.' + nodeClass)
 		;
 		currentNode.find('input[type="radio"]').each(function(idx, input) {
 			var input$ = jQuery(input);
@@ -3341,7 +3367,7 @@ var TableAjax = function() {
 			});
 			priv.modelColFilter_setFilter(col_filter);
 			priv.saveHiddenCols();
-			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
+			jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
 		} else {
 			e.preventDefault();
 			if (input$.length != 1) return;
@@ -3352,7 +3378,7 @@ var TableAjax = function() {
 			input$.prop("checked", !input$.is(':checked'));// update view
 			priv.saveHiddenCols();
 			//_data.cols[column].index = new priv.ext.XDate();
-			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
+			jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['head', 'body']);
 		}
 	};
 
@@ -3372,7 +3398,7 @@ var TableAjax = function() {
 		priv.saveHiddenCols();
 
 		//_data.cols[column].index = new priv.ext.XDate();
-		jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
+		jQuery(_uiMainContainerNode).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
 	};
 
 	/*
@@ -3407,7 +3433,7 @@ var TableAjax = function() {
 	 * Inline edit.
 	 */
 	priv.rowDblClicked = function(e) { // TODO: export outside (handle in table router file)
-		var inlineEditBox$Node = $(_uiNodeCont).parent().children('.tblAjax__inlineEditBox');
+		var inlineEditBox$Node = $(_uiMainContainerNode).parent().children('.tblAjax__inlineEditBox');
 
 		// hide popover for typespecial fld on click
 		if (_popoverCellCurrent) {
@@ -3651,7 +3677,7 @@ var TableAjax = function() {
 				DBG && console.log('DBG:priv.asyncFetchTotal fetch success', { reqId: this__asyncFetchTotal__reqId, data: data })
 				if (SKIP_TOTAL) _state.asyncFetchTotal__lastReceivedId = this__asyncFetchTotal__reqId;
 				if (SKIP_TOTAL) _state.isLoadingTotal = (_state.asyncFetchTotal__lastReceivedId < _state.asyncFetchTotal__lastSentReqId);
-				jQuery(_uiNodeCont).trigger('TableAjax:render', [ 'foot_pagination' ]);
+				jQuery(_uiMainContainerNode).trigger('TableAjax:render', [ 'foot_pagination' ]);
 			} else {
 				p5UI__notifyAjaxCallback(data);
 				// priv.showFailFetchDataMsg();
@@ -3728,7 +3754,7 @@ var TableAjax = function() {
 $.fn.TableAjax = function(options) {
 	options = options || {};
 	return this.each(function() {
-		options.id = this;
+		options.mainContainerNode = this;
 		$(this).data('TableAjax', new TableAjax().init(options));
 	});
 };