fixed table footer info view

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

@@ -745,6 +745,7 @@ var TableAjax = function() {
 	var _uiNodeCont; // container holding table
 	var _uiNodeSelectedInfo;
 	var _uiNodeSpecialFilters;
+	var _uiNodeFooterInfo;
 	var _uiNode$Table; // the table node
 	var _head; // table header
 	var _headSort; // table header sorting row
@@ -1095,14 +1096,18 @@ var TableAjax = function() {
 				_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"></div>').insertAfter(_uiNodeCont);
-			var footToolbar = $('<div class="btn-toolbar tblAjax__footer__toolbar"></div>').appendTo(_foot);
-				$('<span class="tblAjax__footer__toolbar__info"></span>').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(_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);
 		_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);
@@ -2032,20 +2037,19 @@ var TableAjax = function() {
 	};
 
 	priv.renderFooterInfo = function() {
-		var nodeClass = 'tblAjax__' + 'footer__toolbar__info',
-				currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass),
-				node;
-		if (priv.options.debug || DBG) console.log('Render: ', nodeClass);
-		node = $('<div class="foot-info ' + nodeClass + '"></div>');
+		DBG1 && console.log('DBG:TableAjax::renderFooterInfo', { _uiNodeFooterInfo: _uiNodeFooterInfo });
 		var fromRow = Math.max(_state.page - 1, 0) * _state.pageSize;
 		var total = _data.total;
 		var toRow = Math.min(fromRow + _state.pageSize, total);
 		if (_data.total > 0) {
-			$(p5Utils__format('<p>Wiersze od {0} do {1} z {2}</p>', [fromRow + 1, toRow, total])).appendTo(node);
+			_uiNodeFooterInfo.innerHTML = '<div style="font-size:12px; line-height:1.4em;">' +
+				'<strong>Łącznie wyników:</strong> <span class="hide-on-loading">' + total + '</span>' +
+				'<br>' +
+				'<small class="hide-on-loading" style="color:#999; font-size:10px">' + p5Utils__format('Wyświetlane wiersze: od {0} do {1}', [fromRow + 1, toRow]) + '</small>' +
+			'</div>';
 		} else {
-			$('<p>Brak wierszy pasujących do kryteriów wyszukiwania</p>').appendTo(node);
+			_uiNodeFooterInfo.innerHTML = '<p><strong>Brak wierszy pasujących do kryteriów wyszukiwania<strong></p>';
 		}
-		currentNode.replaceWith(node);
 	};
 	priv.renderFooterPagination = function() {
 		var nodeClass = 'tblAjax__' + 'footer__toolbar__pagination',

SE/se-lib/TableAjax.php.style.css

@@ -25,6 +25,7 @@
 .AjaxTable-loading .head-info {background:url(./icon/loading.gif) no-repeat left top; background-position:0 6px;}
 .AjaxTable-loading .loading-info,
 .AjaxTableCont .tblAjax__inlineEditBox .loading-info {display:block; padding:0 0 0 20px; background:url(./icon/loading.gif) no-repeat left top;}
+.AjaxTable-loading .hide-on-loading { display:none }
 .AjaxTableCont .loading-info {display:none;}
 .AjaxTableCont .tblAjax__inlineEditBox .loading-info {display:block;}
 .AjaxTableCont .table {margin-bottom:0px;}
@@ -62,7 +63,7 @@
 .AjaxTableCont .foot { margin:10px; }
 .AjaxTableCont .foot .foot-info { float:left; padding:0 20px; }
  .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;}
+.AjaxTable-loading .foot .foot-info { height:32px; background:url(./icon/loading.gif) no-repeat left bottom; }
 
 .tblAjax__head__specialFilter .btn-group {margin:0 4px 0 0;padding:0;}
 .tblAjax__head__specialFilter .btn-group .glyphicon-remove {color:#f00;}