TableAjax Fix render footer

SE/se-lib/TableAjax.php

@@ -249,7 +249,6 @@ class TableAjax extends ViewAjax {
 
 .AjaxTableCont {position:relative; margin:10px 0; width:100%; overflow-x:auto; border:none;}
 .AjaxTable *,
-.AjaxTableCont .foot * {font-size:12px !important;}
 .AjaxTable.table {white-space:nowrap; width:auto;}
 .AjaxTable p {margin:0;}
 .AjaxTable td, .AjaxTable th {line-height:18px;}
@@ -270,7 +269,6 @@ class TableAjax extends ViewAjax {
 .AjaxTableCont .text-right {text-align:right}
 .AjaxTableCont .breadcrumb em {color:#bbb;}
 
-.AjaxTable-loading .foot .foot-info {padding-left:20px; background:url(./icon/loading.gif) no-repeat left top;}
 .AjaxTable-loading .head-info {background:url(./icon/loading.gif) no-repeat left top; background-position:0 6px;}
 .AjaxTable-loading .loading-info,
 .AjaxTableCont .inlineEditBox .loading-info {display:block; padding:0 0 0 20px; background:url(./icon/loading.gif) no-repeat left top;}
@@ -278,7 +276,6 @@ class TableAjax extends ViewAjax {
 .AjaxTableCont .inlineEditBox .loading-info {display:block;}
 .AjaxTable .stickyCol2 input[type=text].filter {width:50px;}
 .AjaxTableCont .table {margin-bottom:0px;}
-.AjaxTableCont .foot {margin:10px;}
 .AjaxTableCont .stickyCol1 a { color:#333; }
 .AjaxTableCont .stickyCol1 a:hover { color:#337AB7; text-decoration:none; }
 .AjaxTableTaskCnt {padding:0 10px 10px 10px;}
@@ -299,8 +296,6 @@ class TableAjax extends ViewAjax {
 .AjaxTable thead .sort .ta-ordering .remove-cell {position:absolute; top:6px; right:2px; display:none; color:#f00;}
 .AjaxTable thead .sort .ta-ordering:hover .remove-cell {display:block;}
 
-.AjaxTableCont .foot .foot-info { float:left; padding:0 20px; }
- .AjaxTableCont .foot .foot-info p { line-height:16px; margin:5px 0; }
  .AjaxTableCont .pagination { margin:0; }
  .AjaxTableCont .pagination a { line-height:16px; }
 
@@ -310,6 +305,12 @@ class TableAjax extends ViewAjax {
 .AjaxTableCont .AjaxFrmHorizontalEdit .show-last-value .button-appendBack .glyphicon {display:none;}
 .AjaxTableHist em {color:silver;}
 
+.AjaxTableCont .foot * { font-size:12px !important; }
+.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;}
+
 .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;}
@@ -1164,164 +1165,8 @@ class TableAjax extends ViewAjax {
 
 			//create the footer
 			if (!_foot) {
-				_table.find('tfoot').remove();
-				_foot = $('<tfoot></tfoot>').insertAfter(_body);
-
-				//var footRow = $('<tr></tr>').appendTo(_foot);
-				//var footCell = $('<td colspan="999"></td>').appendTo(footRow);
-
-				// TODO: test load footer after table
-				$(_cont).next('.foot').remove();
-				_foot = $('<div class="foot"></div>').insertAfter(_cont);
-
-				//create summary
-				if (_data.total > 0) {
-					$('<div class="foot-info"><p>Wiersze od {0} do {1} z {2}</p></div>'.f(_data.fromRow + 1, Math.min(_data.toRow, _data.total), _data.total)).appendTo(_foot);
-				} else {
-					$('<div><p>Brak wierszy pasujących do kryteriów wyszukiwania</p></div>').appendTo(_foot);
-					_totalPages = 0;
-				}
-
-				//create the pager.
-				var lowerPage = _currPage - 2;
-				var upperPage = _currPage + 2;
-				if (upperPage > _totalPages) {
-					var diff = upperPage - _totalPages;
-					upperPage = _totalPages;
-					lowerPage -= diff;
-				}
-				if (lowerPage < 1) lowerPage = 1;
-				if (upperPage < 5) upperPage = 5;
-
-				var footToolbar = $('<div class="btn-toolbar"></div>').appendTo(_foot);
-				var footPagerUl = $('<div class="btn-group"></div>').appendTo(footToolbar);
-
-				//$('<li class="{0}"><a href="#">&lt;&lt;</a></li>'.f(_currPage == 1 ? 'disabled' : ''))
-				$('<button type="button" class="btn btn-default{0}">&lt;&lt;</button>'.f(_currPage == 1 ? ' disabled' : ''))
-					.on('click', {pageIndex: 1}, priv.pageChanged).appendTo(footPagerUl);
-				//$('<li class="{0}"><a href="#">&lt;</a></li>'.f(_currPage == 1 ? 'disabled' : ''))
-				$('<button type="button" class="btn btn-default{0}">&lt;</button>'.f(_currPage == 1 ? ' disabled' : ''))
-					.on('click', {pageIndex: _currPage - 1}, priv.pageChanged).appendTo(footPagerUl);
-
-				for (var i = lowerPage; i <= upperPage; i++) {
-					var link;
-					//if (i != _currPage) link = $('<li class="{1}"><a href="#">{0}</a></li>'.f(i, i > _totalPages ? 'disabled' : ''));
-					if (i != _currPage) link = $('<button type="button" class="btn btn-default{1}">{0}</button>'.f(i, i > _totalPages ? 'disabled' : ''));
-					//if (i == _currPage) link = $('<li class="active"><a href="#">{0}</a></li>'.f(i));
-					if (i == _currPage) link = $('<button type="button" class="btn btn-default active">{0}</button>'.f(i));
-
-					if (link) {
-						link.on('click', {pageIndex: i}, priv.pageChanged);
-						link.appendTo(footPagerUl);
-					}
-				}
-				//$('<li class="{0}"><a href="#">&gt;</a></li>'.f(_currPage == _totalPages ? 'disabled' : ''))
-				$('<button type="button" class="btn btn-default{0}">&gt;</button>'.f(_currPage == _totalPages ? ' disabled' : ''))
-					.on('click', {pageIndex: _currPage + 1}, priv.pageChanged).appendTo(footPagerUl);
-				//$('<li class="{0}"><a href="#">&gt;&gt;</a></li>'.f(_currPage == _totalPages ? 'disabled' : ''))
-				$('<button type="button" class="btn btn-default{0}">&gt;&gt;</button>'.f(_currPage == _totalPages ? ' disabled' : ''))
-					.on('click', {pageIndex: _totalPages}, priv.pageChanged).appendTo(footPagerUl);
-
-				//create pagesize dropdown
-				if (priv.options.pageSizes.length) {
-					var div = $('<div class="btn-group dropup pagesize"></div>').appendTo(footToolbar);
-					var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Liczba wierszy&nbsp;</button>').appendTo(div);
-					var span = $('<span class="caret"></span>').appendTo(btn);
-					var ul = $('<ul class="dropdown-menu">').appendTo(div);
-
-					$.each(priv.options.pageSizes, function (index, val) {
-						var li = $('<li></li>').appendTo(ul);
-						$('<a href="#">{0}</a>'.f(val)).appendTo(li);
-					});
-					div.on('click', 'a', priv.pageSizeChanged);
-				}
-
-				//create columnpicker dropdown
-				if (priv.options.columnPicker) {
-					var div = $('<div class="btn-group dropup columnpicker"></div>').appendTo(footToolbar);
-					var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Kolumny&nbsp;</button>').appendTo(div);
-					var span = $('<span class="caret"></span>').appendTo(btn);
-					var ul = $('<ul class="dropdown-menu">').appendTo(div);
-
-					$.each(_data.cols, function (col, props) {
-						if (props.type != "unique" && col != 'ID') {
-							var li = $('<li></li>').appendTo(ul);
-							$('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>'.f((props.hidden) ? '' : 'checked', col, props.friendly || col)).appendTo(li);
-						}
-					});
-					div.on('click', 'input', priv.columnPickerClicked);
-				}
-
-				if (priv.options.tblFunctions) {
-					$.map(priv.options.tblFunctions, function(funObj, funName){
-						var div = $('<div class="btn-group"></div>').appendTo(footToolbar);
-						var funHtml = $('<button class="btn btn-sm btn-default"></button>');
-						if (funObj.title) funHtml.attr('title', funObj.title);
-						if (funObj.method) funHtml.on('click', priv[funObj.method]);
-						else if (funObj.href) funHtml.on('click', {hash:funObj.href}, priv.routeChanged);
-
-						var funIconHtml = $('<i></i>');
-						if (funObj.icon) funIconHtml.attr('class', 'glyphicon glyphicon-' + funObj.icon);
-						funIconHtml.prependTo(funHtml);
-
-						funHtml.addClass('btn');
-						funHtml.appendTo(div);
-					});
-				}
-
-				//create actions dropdown
-				if (priv.options.actions) {
-					var div = $('<div class="btn-group dropup actions"></div>').appendTo(footToolbar);
-					var btn = $('<button class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-list"></i>&nbsp;</button>').appendTo(div);
-					var span = $('<span class="caret"></span>').appendTo(btn);
-					var ul = $('<ul class="dropdown-menu">').appendTo(div);
-
-					if (priv.options.actions.filter) {
-						var li = $('<li></li>').appendTo(ul);
-						$('<input {0} type="checkbox" >&nbsp;Filter</input>'.f(priv.options.filter ? 'checked' : '')).appendTo(li);
-						li.on('click', 'input', function (e) {
-							priv.options.filter = !priv.options.filter;
-							jQuery(_cont).trigger('TableAjax:render', ['head']);
-						});
-					}
-					if (priv.options.actions.columnPicker) {
-						var li = $('<li></li>').appendTo(ul);
-						$('<input {0} type="checkbox" >&nbsp;ColumnPicker</input>'.f(priv.options.columnPicker ? 'checked' : '')).appendTo(li);
-						li.on('click', 'input', function (e) {
-							priv.options.columnPicker = !priv.options.columnPicker;
-							jQuery(_cont).trigger('TableAjax:render', ['foot']);
-						});
-					}
-					if (priv.options.actions.custom) {
-						$.each(priv.options.actions.custom, function (index, val) {
-							var li = $('<li></li>').appendTo(ul);
-							$(val).appendTo(li);
-						});
-					}
-				}
-
-				//create export dropdown
-				if (priv.options.exportFields.length) {
-					var div = $('<div class="btn-group dropup pagesize"></div>').appendTo(footToolbar);
-					var btn = $('<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown" href="#">Export&nbsp;</button>').appendTo(div);
-					var span = $('<span class="caret"></span>').appendTo(btn);
-					var ul = $('<ul class="dropdown-menu">').appendTo(div);
-
-					$.each(_data.cols, function (col, props) {
-						if (-1 !== priv.options.exportFields.indexOf(col)) {
-							var li = $('<li></li>').appendTo(ul);
-							$('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>'.f((_exportFieldsSelect[col])? 'checked' : '', col, props.friendly || col)).appendTo(li);
-							li.on('click', 'input', priv.exportFieldChanged);
-						}
-					});
-
-					var li = $('<li></li>').appendTo(ul);
-					$('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share"></i>Export do HTML</a>').appendTo(li);
-					li.on('click', 'a', priv.exportToHTML);
-					var li = $('<li></li>').appendTo(ul);
-					$('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share"></i>Export do CSV</a>').appendTo(li);
-					li.on('click', 'a', priv.exportToCSV);
-				}
+				priv.renderTableTfoot();
+				priv.renderFooter();
 			}
 
 			var stickyCol1Width = (12 + 3) * 4 + 2 * 5 + 1;
@@ -1450,6 +1295,176 @@ class TableAjax extends ViewAjax {
 
 		};
 
+		priv.renderTableTfoot = function() {
+			_table.find('tfoot').remove();
+			_foot = $('<tfoot></tfoot>').insertAfter(_body);
+			//$(_cont).next('.foot').replaceWith(_foot);
+		};
+
+		priv.renderFooter = function() {
+///				$(_cont).next('.foot').remove();
+///				_foot = $('<div class="foot"></div>').insertAfter(_cont);
+			var currentFooterNode = $(_cont).next('.foot');
+			if (0 === currentFooterNode.length) {// initial create .foot element after _cont
+				currentFooterNode = $('<div class="foot"></div>').insertAfter(_cont);
+			}
+			_foot = $('<div class="foot"></div>');
+
+			//create summary
+			if (_data.total > 0) {
+				$('<div class="foot-info"><p>Wiersze od {0} do {1} z {2}</p></div>'.f(_data.fromRow + 1, Math.min(_data.toRow, _data.total), _data.total)).appendTo(_foot);
+			} else {
+				$('<div><p>Brak wierszy pasujących do kryteriów wyszukiwania</p></div>').appendTo(_foot);
+				_totalPages = 0;
+			}
+
+			//create the pager.
+			var lowerPage = _currPage - 2;
+			var upperPage = _currPage + 2;
+			if (upperPage > _totalPages) {
+				var diff = upperPage - _totalPages;
+				upperPage = _totalPages;
+				lowerPage -= diff;
+			}
+			if (lowerPage < 1) lowerPage = 1;
+			if (upperPage < 5) upperPage = 5;
+
+			var footToolbar = $('<div class="btn-toolbar"></div>').appendTo(_foot);
+			var footPagerUl = $('<div class="btn-group"></div>').appendTo(footToolbar);
+
+			//$('<li class="{0}"><a href="#">&lt;&lt;</a></li>'.f(_currPage == 1 ? 'disabled' : ''))
+			$('<button type="button" class="btn btn-default{0}">&lt;&lt;</button>'.f(_currPage == 1 ? ' disabled' : ''))
+				.on('click', {pageIndex: 1}, priv.pageChanged)
+				.appendTo(footPagerUl);
+			//$('<li class="{0}"><a href="#">&lt;</a></li>'.f(_currPage == 1 ? 'disabled' : ''))
+			$('<button type="button" class="btn btn-default{0}">&lt;</button>'.f(_currPage == 1 ? ' disabled' : ''))
+				.on('click', {pageIndex: _currPage - 1}, priv.pageChanged)
+				.appendTo(footPagerUl);
+
+			for (var i = lowerPage; i <= upperPage; i++) {
+				var link;
+				//if (i != _currPage) link = $('<li class="{1}"><a href="#">{0}</a></li>'.f(i, i > _totalPages ? 'disabled' : ''));
+				if (i != _currPage) link = $('<button type="button" class="btn btn-default{1}">{0}</button>'.f(i, i > _totalPages ? 'disabled' : ''));
+				//if (i == _currPage) link = $('<li class="active"><a href="#">{0}</a></li>'.f(i));
+				if (i == _currPage) link = $('<button type="button" class="btn btn-default active">{0}</button>'.f(i));
+
+				if (link) {
+					link.on('click', {pageIndex: i}, priv.pageChanged);
+					link.appendTo(footPagerUl);
+				}
+			}
+			//$('<li class="{0}"><a href="#">&gt;</a></li>'.f(_currPage == _totalPages ? 'disabled' : ''))
+			$('<button type="button" class="btn btn-default{0}">&gt;</button>'.f(_currPage == _totalPages ? ' disabled' : ''))
+				.on('click', {pageIndex: _currPage + 1}, priv.pageChanged)
+				.appendTo(footPagerUl);
+			//$('<li class="{0}"><a href="#">&gt;&gt;</a></li>'.f(_currPage == _totalPages ? 'disabled' : ''))
+			$('<button type="button" class="btn btn-default{0}">&gt;&gt;</button>'.f(_currPage == _totalPages ? ' disabled' : ''))
+				.on('click', {pageIndex: _totalPages}, priv.pageChanged)
+				.appendTo(footPagerUl);
+
+			//create pagesize dropdown
+			if (priv.options.pageSizes.length) {
+				var div = $('<div class="btn-group dropup pagesize"></div>').appendTo(footToolbar);
+				var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Liczba wierszy&nbsp;</button>').appendTo(div);
+				var span = $('<span class="caret"></span>').appendTo(btn);
+				var ul = $('<ul class="dropdown-menu">').appendTo(div);
+
+				$.each(priv.options.pageSizes, function (index, val) {
+					var li = $('<li></li>').appendTo(ul);
+					$('<a href="#">{0}</a>'.f(val)).appendTo(li);
+				});
+				div.on('click', 'a', priv.pageSizeChanged);
+			}
+
+			//create columnpicker dropdown
+			if (priv.options.columnPicker) {
+				var div = $('<div class="btn-group dropup columnpicker"></div>').appendTo(footToolbar);
+				var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Kolumny&nbsp;</button>').appendTo(div);
+				var span = $('<span class="caret"></span>').appendTo(btn);
+				var ul = $('<ul class="dropdown-menu">').appendTo(div);
+
+				$.each(_data.cols, function (col, props) {
+					if (props.type != "unique" && col != 'ID') {
+						var li = $('<li></li>').appendTo(ul);
+						$('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>'.f((props.hidden) ? '' : 'checked', col, props.friendly || col)).appendTo(li);
+					}
+				});
+				div.on('click', 'input', priv.columnPickerClicked);
+			}
+
+			if (priv.options.tblFunctions) {
+				$.map(priv.options.tblFunctions, function(funObj, funName){
+					var div = $('<div class="btn-group"></div>').appendTo(footToolbar);
+					var funHtml = $('<button class="btn btn-sm btn-default"></button>');
+					if (funObj.title) funHtml.attr('title', funObj.title);
+					if (funObj.method) funHtml.on('click', priv[funObj.method]);
+					else if (funObj.href) funHtml.on('click', {hash:funObj.href}, priv.routeChanged);
+
+					var funIconHtml = $('<i></i>');
+					if (funObj.icon) funIconHtml.attr('class', 'glyphicon glyphicon-' + funObj.icon);
+					funIconHtml.prependTo(funHtml);
+
+					funHtml.addClass('btn');
+					funHtml.appendTo(div);
+				});
+			}
+
+			//create actions dropdown
+			if (priv.options.actions) {
+				var div = $('<div class="btn-group dropup actions"></div>').appendTo(footToolbar);
+				var btn = $('<button class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-list"></i>&nbsp;</button>').appendTo(div);
+				var span = $('<span class="caret"></span>').appendTo(btn);
+				var ul = $('<ul class="dropdown-menu">').appendTo(div);
+
+				if (priv.options.actions.filter) {
+					var li = $('<li></li>').appendTo(ul);
+					$('<input {0} type="checkbox" >&nbsp;Filter</input>'.f(priv.options.filter ? 'checked' : '')).appendTo(li);
+					li.on('click', 'input', function (e) {
+						priv.options.filter = !priv.options.filter;
+						jQuery(_cont).trigger('TableAjax:render', ['head']);
+					});
+				}
+				if (priv.options.actions.columnPicker) {
+					var li = $('<li></li>').appendTo(ul);
+					$('<input {0} type="checkbox" >&nbsp;ColumnPicker</input>'.f(priv.options.columnPicker ? 'checked' : '')).appendTo(li);
+					li.on('click', 'input', function (e) {
+						priv.options.columnPicker = !priv.options.columnPicker;
+						jQuery(_cont).trigger('TableAjax:render', ['foot']);
+					});
+				}
+				if (priv.options.actions.custom) {
+					$.each(priv.options.actions.custom, function (index, val) {
+						var li = $('<li></li>').appendTo(ul);
+						$(val).appendTo(li);
+					});
+				}
+			}
+
+			//create export dropdown
+			if (priv.options.exportFields.length) {
+				var div = $('<div class="btn-group dropup pagesize"></div>').appendTo(footToolbar);
+				var btn = $('<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown" href="#">Export&nbsp;</button>').appendTo(div);
+				var span = $('<span class="caret"></span>').appendTo(btn);
+				var ul = $('<ul class="dropdown-menu">').appendTo(div);
+
+				$.each(_data.cols, function (col, props) {
+					if (-1 !== priv.options.exportFields.indexOf(col)) {
+						var li = $('<li></li>').appendTo(ul);
+						$('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>'.f((_exportFieldsSelect[col])? 'checked' : '', col, props.friendly || col)).appendTo(li);
+						li.on('click', 'input', priv.exportFieldChanged);
+					}
+				});
+
+				var li = $('<li></li>').appendTo(ul);
+				$('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share"></i>Export do HTML</a>').appendTo(li);
+				li.on('click', 'a', priv.exportToHTML);
+				var li = $('<li></li>').appendTo(ul);
+				$('<a href="index.php" target="_blank" class=""><i class="glyphicon glyphicon-share"></i>Export do CSV</a>').appendTo(li);
+				li.on('click', 'a', priv.exportToCSV);
+			}
+			currentFooterNode.replaceWith(_foot);
+		};
+
 		priv.exportFieldChanged = function (e) {
 
 			e.stopPropagation();