TableAjax fix render footer

SE/se-lib/TableAjax.php

@@ -556,7 +556,6 @@ class TableAjax extends ViewAjax {
 		var _state;// state - to replace variables below (date, ...)
 		var _data; //columns and rows
 		var _currPage = 1; // current page
-		var _pageSize; // current pagesize
 		var _totalPages; // total pages
 		var _currSortCol; // current sorting column
 		var _currSortFlip = false; // current sorting direction
@@ -622,6 +621,16 @@ class TableAjax extends ViewAjax {
 						case 'head': _head = undefined; break;
 						case 'body': _body = undefined; break;
 						case 'foot': _foot = undefined; break;
+						case 'foot_pagination': {
+								priv.renderFooterInfo();
+								priv.renderFooterPagination();
+								priv.renderFooterPageSizes();
+							}
+							break;
+						case 'footer__toolbar__info': priv.renderFooterInfo(); break;
+						case 'footer__toolbar__pagination': priv.renderFooterPagination(); break;
+						case 'footer__toolbar__pagesizes': priv.renderFooterPageSizes(); break;
+						case 'foot__columnPicker': priv.renderFooterColumnPicker(); break;
 					}
 				}
 				priv.renderTable();
@@ -1131,13 +1140,12 @@ class TableAjax extends ViewAjax {
 				});
 
 				if (_currPage == 1) {
-					_pageSize = rowsAdded;
-					_totalPages = Math.round(Math.ceil(_data.total / _pageSize));
+					_totalPages = Math.ceil(_data.total / priv.options.pageSize);
 				}
 
 				//pad with empty rows if we're at last page.
 				if (_currPage == _totalPages) {
-					while (rowsAdded < _pageSize) {
+					while (rowsAdded < priv.options.pageSize) {
 						var row = $('<tr></tr>').appendTo(_body);
 
 						if (_uniqueCol && priv.options.checkboxes) {
@@ -1309,79 +1317,130 @@ class TableAjax extends ViewAjax {
 				currentFooterNode = $('<div class="foot"></div>').insertAfter(_cont);
 			}
 			_foot = $('<div class="foot"></div>');
+			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__actions"></span>').appendTo(footToolbar);
+			$('<span class="tblAjax__footer__toolbar__export"></span>').appendTo(footToolbar);
 
 			//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);
+			currentFooterNode.replaceWith(_foot);
+
+			priv.renderFooterInfo();
+			priv.renderFooterPagination();
+			priv.renderFooterPageSizes();
+			priv.renderFooterColumnPicker();
+			priv.renderFooterFunctions();
+			priv.renderFooterActions();
+			priv.renderFooterExport();
+		};
+
+		priv.renderFooterInfo = function() {
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__info',
+					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					node;
+			if (priv.options.debug) console.log('Render: ', nodeClass);
+			node = $('<div class="foot-info ' + nodeClass + '"></div>');
+			if (_data.total > 0) {
+				$('<p>Wiersze od {0} do {1} z {2}</p>'.f(_data.fromRow + 1, Math.min(_data.toRow, _data.total), _data.total)).appendTo(node);
+			} else {
+				$('<p>Brak wierszy pasujących do kryteriów wyszukiwania</p>').appendTo(node);
+			}
+			currentNode.replaceWith(node);
+		};
+		priv.renderFooterPagination = function() {
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__pagination',
+					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					node;
+			if (priv.options.debug) console.log('Render: ', nodeClass);
+			if (_data.total > 0) {
+				node = $('<div class="btn-group ' + nodeClass + '"></div>');
+				var totalPages = Math.ceil(_data.total / priv.options.pageSize);
+				//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;
+
+				//$('<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(node);
+				//$('<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(node);
+
+				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(node);
+					}
+				}
+				//$('<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(node);
+				//$('<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(node);
+			} else {
+				node = $('<span class="' + nodeClass + '"></span>');
 			}
-			//$('<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);
+			currentNode.replaceWith(node);
+		};
+		priv.renderFooterPageSizes = function() {
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__pagesizes',
+					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					node;
+			if (priv.options.debug) console.log('Render: ', nodeClass);
+			if (_data.total > 0 && priv.options.pageSizes.length > 0) {
+				node = $('<div class="btn-group dropup pagesize ' + nodeClass + '"></div>');
+				var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Liczba wierszy&nbsp;</button>').appendTo(node);
 				var span = $('<span class="caret"></span>').appendTo(btn);
-				var ul = $('<ul class="dropdown-menu">').appendTo(div);
+				var ul = $('<ul class="dropdown-menu">').appendTo(node);
 
 				$.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);
+				node.on('click', 'a', priv.pageSizeChanged);
+			} else {
+				node = $('<span class="' + nodeClass + '"></span>');
 			}
-
-			//create columnpicker dropdown
+			currentNode.replaceWith(node);
+		};
+		priv.renderFooterColumnPicker = function() {
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
+					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					node;
+			if (priv.options.debug) console.log('Render: ', nodeClass);
 			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);
+				node = $('<div class="btn-group dropup columnpicker ' + nodeClass + '"></div>');
+				var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Kolumny&nbsp;</button>').appendTo(node);
 				var span = $('<span class="caret"></span>').appendTo(btn);
-				var ul = $('<ul class="dropdown-menu">').appendTo(div);
+				var ul = $('<ul class="dropdown-menu">').appendTo(node);
 
 				$.each(_data.cols, function (col, props) {
 					if (props.type != "unique" && col != 'ID') {
@@ -1389,12 +1448,20 @@ class TableAjax extends ViewAjax {
 						$('<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);
+				node.on('click', 'input', priv.columnPickerClicked);
+			} else {
+				node = $('<span class="' + nodeClass + '"></span>');
 			}
-
+			currentNode.replaceWith(node);
+		};
+		priv.renderFooterFunctions = function() {
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__functions',
+					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					node;
+			if (priv.options.debug) console.log('Render: ', nodeClass);
 			if (priv.options.tblFunctions) {
+				node = $('<div class="btn-group ' + nodeClass + '"></div>');
 				$.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]);
@@ -1405,16 +1472,23 @@ class TableAjax extends ViewAjax {
 					funIconHtml.prependTo(funHtml);
 
 					funHtml.addClass('btn');
-					funHtml.appendTo(div);
+					funHtml.appendTo(node);
 				});
+			} else {
+				node = $('<span class="' + nodeClass + '"></span>');
 			}
-
-			//create actions dropdown
+			currentNode.replaceWith(node);
+		};
+		priv.renderFooterActions = function() {// TODO: is used?
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__actions',
+					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					node;
+			if (priv.options.debug) console.log('Render: ', nodeClass);
 			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);
+				node = $('<div class="btn-group dropup actions ' + nodeClass + '"></div>');
+				var btn = $('<button class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-list"></i>&nbsp;</button>').appendTo(node);
 				var span = $('<span class="caret"></span>').appendTo(btn);
-				var ul = $('<ul class="dropdown-menu">').appendTo(div);
+				var ul = $('<ul class="dropdown-menu">').appendTo(node);
 
 				if (priv.options.actions.filter) {
 					var li = $('<li></li>').appendTo(ul);
@@ -1438,14 +1512,21 @@ class TableAjax extends ViewAjax {
 						$(val).appendTo(li);
 					});
 				}
+			} else {
+				node = $('<span class="' + nodeClass + '"></span>');
 			}
-
-			//create export dropdown
+			currentNode.replaceWith(node);
+		};
+		priv.renderFooterExport = function() {
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__export',
+					currentNode = $(_cont).next('.foot').find('.' + nodeClass),
+					node;
+			if (priv.options.debug) console.log('Render: ', nodeClass);
 			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);
+				node = $('<div class="btn-group dropup pagesize ' + nodeClass + '"></div>');
+				var btn = $('<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown" href="#">Export&nbsp;</button>').appendTo(node);
 				var span = $('<span class="caret"></span>').appendTo(btn);
-				var ul = $('<ul class="dropdown-menu">').appendTo(div);
+				var ul = $('<ul class="dropdown-menu">').appendTo(node);
 
 				$.each(_data.cols, function (col, props) {
 					if (-1 !== priv.options.exportFields.indexOf(col)) {
@@ -1461,8 +1542,10 @@ class TableAjax extends ViewAjax {
 				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);
+			} else {
+				node = $('<span class="' + nodeClass + '"></span>');
 			}
-			currentFooterNode.replaceWith(_foot);
+			currentNode.replaceWith(node);
 		};
 
 		priv.exportFieldChanged = function (e) {
@@ -1659,6 +1742,7 @@ class TableAjax extends ViewAjax {
 					priv.setStateData(state.data, true);
 				}
 				renderParts.push('body');
+				renderParts.push('foot_pagination');
 			}
 
 /// console.log('setState::renderParts: ', renderParts);//TODO:DBG:RMME
@@ -1683,10 +1767,10 @@ class TableAjax extends ViewAjax {
 			//we might have more/less data now. Recalculate stuff.
 			if (_currPage > 1) {
 				_data.toRow = Math.min(_data.total, _data.toRow);
-				_data.fromRow = _data.toRow - _pageSize;
+				_data.fromRow = _data.toRow - priv.options.pageSize;
 				_data.fromRow = Math.max(_data.fromRow, 0);
-				_currPage = Math.ceil(_data.fromRow / _pageSize) + 1;
-				_totalPages = Math.ceil(_data.total / _pageSize);
+				_currPage = Math.ceil(_data.fromRow / priv.options.pageSize) + 1;
+				_totalPages = Math.ceil(_data.total / priv.options.pageSize);
 			} else {
 				_data.fromRow = 0;
 				if (priv.options.pageSize != -1)
@@ -2122,8 +2206,8 @@ class TableAjax extends ViewAjax {
 			if (priv.options.debug) console.log('paging to index:{0} L.<?php echo __LINE__; ?>'.f(_currPage));
 
 			//find out what rows to create
-			_data.fromRow = ((_currPage - 1) * _pageSize);
-			_data.toRow = _data.fromRow + _pageSize;
+			_data.fromRow = ((_currPage - 1) * priv.options.pageSize);
+			_data.toRow = _data.fromRow + priv.options.pageSize;
 			if (_data.toRow > _data.rows.length) _data.toRow = _data.rows.length;
 
 			//trigger callback
@@ -2134,7 +2218,7 @@ class TableAjax extends ViewAjax {
 				});
 			}
 
-			jQuery(_cont).trigger('TableAjax:render', ['body', 'foot']);
+			jQuery(_cont).trigger('TableAjax:render', ['body', 'foot_pagination']);
 		};
 
 		/*
@@ -2143,12 +2227,10 @@ class TableAjax extends ViewAjax {
 		 */
 		priv.pageSizeChanged = function (e) {
 			e.preventDefault();
-			var val = $(this).text().toLowerCase();
+			var val = $(this).text();
 			if (priv.options.debug) console.log('pagesize changed to:{0}'.f(val));
 
-			//set the new pagesize
-			if (val == "all") priv.options.pageSize = _data.rows.length;
-			else priv.options.pageSize = parseInt(val);
+			priv.options.pageSize = parseInt(val);
 
 			//revert to first page, as its gets messy otherwise.
 			_currPage = 1;
@@ -2164,7 +2246,7 @@ class TableAjax extends ViewAjax {
 				});
 			}
 
-			jQuery(_cont).trigger('TableAjax:render', ['body', 'foot']);
+			jQuery(_cont).trigger('TableAjax:render', ['body', 'foot_pagination']);
 		};
 
 		/*
@@ -2255,7 +2337,7 @@ class TableAjax extends ViewAjax {
 			priv.saveHiddenCols();
 
 			//_data.cols[column].index = new priv.ext.XDate();
-			jQuery(_cont).trigger('TableAjax:render', ['head', 'body', 'foot']);
+			jQuery(_cont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
 		};
 
 		/*