TableAjax fix specialFilters

SE/se-lib/TableAjax.php

@@ -312,10 +312,10 @@ class TableAjax extends ViewAjax {
  .AjaxTableCont .foot .foot-info p { line-height:16px; margin:5px 0; }
 .AjaxTable-loading .foot .foot-info {padding-left:20px; background:url(./icon/loading.gif) no-repeat left top;}
 
-.TableAjax-SpecialFilter {margin:0;padding:4px 4px 4px 127px;}
-.TableAjax-SpecialFilter .btn-group {margin:0 4px;padding:0;}
-.TableAjax-SpecialFilter .btn-group .glyphicon-remove {color:#f00;}
-.TableAjax-SpecialFilter .btn-group button.disabled .glyphicon-remove {color:#bbb;}
+.tblAjax__head__specialFilter {margin:0;padding:4px 4px 4px 127px;}
+.tblAjax__head__specialFilter .btn-group {margin:0 4px;padding:0;}
+.tblAjax__head__specialFilter .btn-group .glyphicon-remove {color:#f00;}
+.tblAjax__head__specialFilter .btn-group button.disabled .glyphicon-remove {color:#bbb;}
 
 /* overwrite bootstrap table border */
 .AjaxTable,    .AjaxTableEdit,
@@ -563,7 +563,6 @@ class TableAjax extends ViewAjax {
 		var _currDpOp; // clicked datetimepicker operator
 		var _filterCols = {}; // array with current filters /// TODO: mv to _state.filterCols
 		var _filterFields = {}; // array with filter DOM elements
-		var _specialFilters = {}; // array with current special filters
 		var _filterTimeout; // timer for delayed filtering
 		var _uniqueCols = {}; // array with checked rows /// TODO: mv to _state.filterCols
 		var _checkToggleChecked = false; // check-all toggle state
@@ -577,6 +576,7 @@ class TableAjax extends ViewAjax {
 		priv.init = function () {
 			_uiNodeCont = priv.options.id;
 			_state = {};// init state
+			_state.specialFilters = {};
 			priv.initEvents();
 			priv.initialRender();// set up _uiNode$...
 			priv.options.types.string = ((priv.options.types || {}).string || {});
@@ -592,7 +592,7 @@ class TableAjax extends ViewAjax {
 				$.map(priv.options.specialFilterFunctions, function(groupObj, groupName) {
 					var fltrName = 'sf_' + groupName;
 					if (fltrName in priv.options.filterInit) {
-						_specialFilters[groupName] = priv.options.filterInit[fltrName];
+						_state.specialFilters[groupName] = priv.options.filterInit[fltrName];
 					}
 				});
 			}
@@ -633,6 +633,7 @@ class TableAjax extends ViewAjax {
 						case 'footer__toolbar__pagination': priv.renderFooterPagination(); break;
 						case 'footer__toolbar__pagesizes': priv.renderFooterPageSizes(); break;
 						case 'foot__columnPicker': priv.renderFooterColumnPicker(); break;
+						case 'head__specialFilters': priv.renderHeadSpecialFilters(); break;
 					}
 				}
 				priv.renderTable();
@@ -657,6 +658,8 @@ class TableAjax extends ViewAjax {
 			_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);
+			$('<div class="btn-toolbar tblAjax__head__specialFilter"></div>').insertBefore(_uiNodeCont);
+
 			_foot = _head = _body = _headSort = _headFilter = undefined;// TODO: refactor
 			/// console.log('L.<?php echo __LINE__; ?> priv.initialRender, _uiNode$Table: ', _uiNode$Table.html())
 		}
@@ -696,28 +699,8 @@ class TableAjax extends ViewAjax {
 
 			//create the header special filters row
 			if (!_headSpecialFilter && priv.options.specialFilterFunctions) {
-				//create the functions column
-				if (priv.options.specialFilterFunctions) {
-					jQuery(_uiNodeCont).prev('.TableAjax-SpecialFilter').remove();
-					var _headSpecialFilter = $('<div class="btn-toolbar TableAjax-SpecialFilter"></div>').insertBefore(_uiNodeCont);
-					$.map(priv.options.specialFilterFunctions, function(groupObj, groupName) {
-						var btnHtml, btnSelected, groupHtml = $('<div class="btn-group"></div>');
-						// _specialFilters[e.data.group] = e.data.value;
-						if (groupName in _specialFilters) {
-							btnSelected = _specialFilters[groupName];
-						}
-						if (groupObj.icon) {
-							$('<button class="btn btn-xs btn-default" title="' + groupName + '"><i class="' + groupObj.icon + '"></i></button>').appendTo(groupHtml);
-						}
-						$.map(groupObj.btns, function(btnObj, btnName) {
-							btnHtml = $('<button class="btn btn-xs btn-default' + ((btnSelected && btnSelected == btnObj.value)? ' active' : '') + '">' + btnName + '</button>').appendTo(groupHtml);
-							btnHtml.on('click', {group: groupName, value: btnObj.value}, priv.specialFilterChanged);
-						});
-						btnHtml = $('<button class="btn btn-xs btn-default' + ((!btnSelected)? ' disabled' : '') + '" title="Kasuj filtr"><i class="glyphicon glyphicon-remove"></i></button>').appendTo(groupHtml);
-						btnHtml.on('click', {group: groupName, value: ''}, priv.specialFilterChanged);
-						groupHtml.appendTo(_headSpecialFilter);
-					});
-				}
+				priv.renderHeadSpecialFilters();
+				_headSpecialFilter = true;
 			}
 
 			//create the body
@@ -1189,6 +1172,36 @@ class TableAjax extends ViewAjax {
 			currentNode.replaceWith(node);
 		};
 
+		priv.renderHeadSpecialFilters = function() {
+			var nodeClass = 'tblAjax__' + 'head__specialFilter',
+					currentNode = $(_uiNodeCont).prev('.' + nodeClass),
+					node;
+			/// console.log('L.<?php echo __LINE__; ?> renderTable::renderTableTheadFilter...');//TODO:DBG:RMME
+			if (!priv.options.specialFilterFunctions) {
+				return;
+			}
+			var node = $('<div class="btn-toolbar tblAjax__head__specialFilter"></div>');
+			$.map(priv.options.specialFilterFunctions, function(groupObj, groupName) {
+				var btnHtml, btnSelected, groupHtml = $('<div class="btn-group"></div>');
+				// _state.specialFilters[e.data.group] = e.data.value;
+				if (groupName in _state.specialFilters) {
+					btnSelected = _state.specialFilters[groupName];
+				}
+				if (groupObj.icon) {
+					$('<button class="btn btn-xs btn-default" title="' + groupName + '"><i class="' + groupObj.icon + '"></i></button>').appendTo(groupHtml);
+				}
+				$.map(groupObj.btns, function(btnObj, btnName) {
+					btnHtml = $('<button class="btn btn-xs btn-default' + ((btnSelected && btnSelected == btnObj.value)? ' active' : '') + '">' + btnName + '</button>').appendTo(groupHtml);
+					btnHtml.on('click', {group: groupName, value: btnObj.value}, priv.specialFilterChanged);
+				});
+				btnHtml = $('<button class="btn btn-xs btn-default' + ((!btnSelected)? ' disabled' : '') + '" title="Kasuj filtr"><i class="glyphicon glyphicon-remove"></i></button>').appendTo(groupHtml);
+				btnHtml.on('click', {group: groupName, value: ''}, priv.specialFilterChanged);
+				groupHtml.appendTo(node);
+			});
+
+			currentNode.replaceWith(node);
+		};
+
 		priv.renderTableTheadFilter = function() {
 			var nodeClass = 'tblAjax__' + 'head__filter',
 					currentNode = _uiNode$Table.find('thead').find('.filter'),
@@ -1603,7 +1616,7 @@ class TableAjax extends ViewAjax {
 			}
 
 			// specialFilters
-			$.each(_specialFilters, function(groupName, btnValue) {
+			$.each(_state.specialFilters, function(groupName, btnValue) {
 				if (btnValue.length > 0) {
 					exportUrl += '&sf_' + groupName + '=' + btnValue;
 				}
@@ -1744,6 +1757,10 @@ class TableAjax extends ViewAjax {
 				renderParts.push('body');
 				renderParts.push('foot_pagination');
 			}
+			if (state.hasOwnProperty('specialFilters')) {
+				_state.specialFilters = state.specialFilters;
+				renderParts.push('head__specialFilters');
+			}
 
 			if (priv.options.debug) console.log('setState::renderParts: ', renderParts);//TODO:DBG:RMME
 			if (renderParts.length > 0) {
@@ -1955,7 +1972,10 @@ class TableAjax extends ViewAjax {
 		 */
 		priv.specialFilterChanged = function (e) {
 			if (priv.options.debug) console.log('specialFilterChanged e.data:', e.data);
-			_specialFilters[e.data.group] = e.data.value;
+			var state = {};
+			state.specialFilters = _state.specialFilters;
+			state.specialFilters[e.data.group] = e.data.value;
+			priv.setState(state);
 
 			publ.loadPage(0);
 		};
@@ -2572,7 +2592,7 @@ class TableAjax extends ViewAjax {
 			}
 
 			// specialFilters
-			$.each(_specialFilters, function(groupName, btnValue) {
+			$.each(_state.specialFilters, function(groupName, btnValue) {
 				if (btnValue.length > 0) {
 					reqData['sf_' + groupName] = btnValue;
 				}