diff --git a/Gruntfile.js b/Gruntfile.js index 064edff6..ace2b0c2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -69,6 +69,8 @@ module.exports = function(grunt) { 'src/scripts/ngTableFilterRow.directive.js', 'src/scripts/ngTableSorterRowController.js', 'src/scripts/ngTableSorterRow.directive.js', + 'src/scripts/ngTableSummaryRow.directive.js', + 'src/scripts/ngTableSummaryRowController.js', 'src/scripts/ngTableSelectFilterDs.directive.js', './.temp/scripts/views.js', 'src/scripts/outro.js' diff --git a/dist/ng-table.js b/dist/ng-table.js index 9ea4e960..7ef5c6d9 100644 --- a/dist/ng-table.js +++ b/dist/ng-table.js @@ -10,7 +10,7 @@ } }(window.angular || null, function(angular) { 'use strict'; - + /** * ngTable: Table + Angular JS * @@ -27,7 +27,7 @@ */ angular.module('ngTable', []); })(); - + /** * ngTable: Table + Angular JS * @@ -49,7 +49,7 @@ settings: {} }); })(); - + /** * ngTable: Table + Angular JS * @@ -147,7 +147,7 @@ } } })(); - + /** * ngTable: Table + Angular JS * @@ -235,7 +235,7 @@ } } })(); - + /** * ngTable: Table + Angular JS * @@ -345,7 +345,7 @@ } } })(); - + /** * ngTable: Table + Angular JS * @@ -382,7 +382,7 @@ } } })(); - + /** * ngTable: Table + Angular JS * @@ -408,6 +408,9 @@ headerTemplateURL: function(){ return false; }, headerTitle: function(){ return ''; }, sortable: function(){ return false; }, + summary: function() { return false; }, + summaryClass: function(){ return ''; }, + summaryFilter: function(){ return false; }, show: function(){ return true; }, title: function(){ return ''; }, titleAlt: function(){ return ''; } @@ -460,7 +463,7 @@ }; }]); })(); - + /** * ngTable: Table + Angular JS * @@ -611,6 +614,20 @@ }) : settings.total; }; + /** + * @ngdoc method + * @name NgTableParams#summaryVaules + * @description If parameter summaryVaules not set return current summary else set current summaryVaules + * + * @param {string} summaryVaules + * @returns {Object|Number} Current summaryVaules or `this` + */ + this.summaryValues = function(summaryValues) { + return angular.isDefined(summaryValues) ? this.settings({ + 'summaryValues': summaryValues + }) : settings.summaryValues; + } + /** * @ngdoc method * @name NgTableParams#count @@ -1078,9 +1095,7 @@ return NgTableParams; }]); })(); - - - + /** * ngTable: Table + Angular JS * @@ -1162,6 +1177,7 @@ if (!$element.hasClass('ng-table')) { $scope.templates = { header: ($attrs.templateHeader ? $attrs.templateHeader : 'ng-table/header.html'), + footer: ($attrs.templateFooter ? $attrs.templateFooter : 'ng-table/footer.html'), pagination: ($attrs.templatePagination ? $attrs.templatePagination : 'ng-table/pager.html') }; $element.addClass('ng-table'); @@ -1178,6 +1194,17 @@ headerTemplate = angular.element(document.createElement('thead')).attr('ng-include', 'templates.header'); $element.prepend(headerTemplate); } + var footerTemplate = null; + var tfootFound = false; + angular.forEach($element.children(), function(e){ + if (e.tagName === 'TFOOT') { + theadFound = true; + } + }); + if (!tfootFound) { + footerTemplate = angular.element(document.createElement('tfoot')).attr('ng-include', 'templates.footer'); + $element.append(footerTemplate); + } var paginationTemplate = angular.element(document.createElement('div')).attr({ 'ng-table-pagination': 'params', 'template-url': 'templates.pagination' @@ -1186,6 +1213,9 @@ if (headerTemplate) { $compile(headerTemplate)($scope); } + if (footerTemplate) { + $compile(footerTemplate)($scope); + } $compile(paginationTemplate)($scope); } }; @@ -1268,8 +1298,6 @@ } }; - - function commonInit(){ ngTableEventsChannel.onAfterReloadData(bindDataToScope, $scope, isMyPublisher); ngTableEventsChannel.onPagesChanged(bindPagesToScope, $scope, isMyPublisher); @@ -1294,7 +1322,7 @@ commonInit(); }]); })(); - + /** * ngTable: Table + Angular JS * @@ -1373,6 +1401,9 @@ sortable: parsedAttribute('sortable'), 'class': parsedAttribute('header-class'), filter: parsedAttribute('filter'), + summary: parsedAttribute('summary'), + summaryClass: parsedAttribute('summary-class'), + summaryFilter: parsedAttribute('summary-filter'), headerTemplateURL: parsedAttribute('header'), filterData: parsedAttribute('filter-data'), show: (el.attr("ng-if") ? function (scope) { @@ -1392,7 +1423,7 @@ } ]); })(); - + /** * ngTable: Table + Angular JS * @@ -1465,7 +1496,7 @@ }; }]); })(); - + /** * ngTable: Table + Angular JS * @@ -1517,7 +1548,7 @@ ]); })(); - + /** * ngTable: Table + Angular JS * @@ -1557,7 +1588,7 @@ }; } })(); - + /** * ngTable: Table + Angular JS * @@ -1585,7 +1616,7 @@ return directive; } })(); - + /** * ngTable: Table + Angular JS * @@ -1624,7 +1655,7 @@ } } })(); - + /** * ngTable: Table + Angular JS * @@ -1652,7 +1683,62 @@ return directive; } })(); + +/** + * ngTable: Table + Angular JS + * + * @author Szymon Drosdzol + * @url https://github.com/sprzedamsanki/ng-table + * @license New BSD License + */ + + (function(){ + 'use strict'; + + angular.module('ngTable') + .directive('ngTableSummaryRow', ngTableSummaryRow); + + ngTableSummaryRow.$inject = []; + + function ngTableSummaryRow(){ + var directive = { + restrict: 'E', + replace: true, + templateUrl: 'ng-table/summaryRow.html', + scope: true, + controller: 'ngTableSummaryRowController' + }; + return directive; + } + })(); + +/** + * ngTable: Table + Angular JS + * + * @author Szymon Drosdzol + * @url https://github.com/sprzedamsanki/ng-table + * @license New BSD License + */ + +(function(){ + 'use strict'; + + angular.module('ngTable') + .controller('ngTableSummaryRowController', ngTableSummaryRowController); + + ngTableSummaryRowController.$inject = ['$scope']; + function ngTableSummaryRowController($scope){ + $scope.params.settings().summaries = $scope.$columns.map(function($column){ + return $column.summary; + }); + + $scope.params.settings().summaryFilters = $scope.$columns.map(function($column){ + return $column.summaryFilter; + }); + } +})(); + /** * ngTable: Table + Angular JS * @@ -1728,16 +1814,18 @@ } } })(); - -angular.module('ngTable').run(['$templateCache', function ($templateCache) { - $templateCache.put('ng-table/filterRow.html', '
'); - $templateCache.put('ng-table/filters/number.html', ' '); - $templateCache.put('ng-table/filters/select-multiple.html', ' '); - $templateCache.put('ng-table/filters/select.html', ' '); - $templateCache.put('ng-table/filters/text.html', ' '); - $templateCache.put('ng-table/header.html', ' '); - $templateCache.put('ng-table/pager.html', ' '); - $templateCache.put('ng-table/sorterRow.html', '
'); -}]); + +angular.module('ngTable').run(['$templateCache', function ($templateCache) { + $templateCache.put('ng-table/filterRow.html', '
'); + $templateCache.put('ng-table/filters/number.html', ' '); + $templateCache.put('ng-table/filters/select-multiple.html', ' '); + $templateCache.put('ng-table/filters/select.html', ' '); + $templateCache.put('ng-table/filters/text.html', ' '); + $templateCache.put('ng-table/footer.html', ' '); + $templateCache.put('ng-table/header.html', ' '); + $templateCache.put('ng-table/pager.html', ' '); + $templateCache.put('ng-table/sorterRow.html', '
'); + $templateCache.put('ng-table/summaryRow.html', ' {{params.summaryValues()[$column.summary(this)]}} '); +}]); return angular.module('ngTable'); })); diff --git a/examples/demo35.html b/examples/demo35.html new file mode 100644 index 00000000..c3fd682a --- /dev/null +++ b/examples/demo35.html @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + +

Table with summary footer

+ +
+ + + + + + +
+ {{user.name}} + + {{user.age}} +
+ + + +
+ + + + diff --git a/src/ng-table/footer.html b/src/ng-table/footer.html new file mode 100644 index 00000000..5a513f0d --- /dev/null +++ b/src/ng-table/footer.html @@ -0,0 +1 @@ + diff --git a/src/ng-table/summaryRow.html b/src/ng-table/summaryRow.html new file mode 100644 index 00000000..a7aaa25c --- /dev/null +++ b/src/ng-table/summaryRow.html @@ -0,0 +1,8 @@ + + + {{params.summaryValues()[$column.summary(this)]}} + + diff --git a/src/scripts/ngTable.directive.js b/src/scripts/ngTable.directive.js index b857ddb9..77117c19 100644 --- a/src/scripts/ngTable.directive.js +++ b/src/scripts/ngTable.directive.js @@ -76,6 +76,9 @@ sortable: parsedAttribute('sortable'), 'class': parsedAttribute('header-class'), filter: parsedAttribute('filter'), + summary: parsedAttribute('summary'), + summaryClass: parsedAttribute('summary-class'), + summaryFilter: parsedAttribute('summary-filter'), headerTemplateURL: parsedAttribute('header'), filterData: parsedAttribute('filter-data'), show: (el.attr("ng-if") ? function (scope) { diff --git a/src/scripts/ngTableColumn.js b/src/scripts/ngTableColumn.js index 1dd1b006..7a48277f 100644 --- a/src/scripts/ngTableColumn.js +++ b/src/scripts/ngTableColumn.js @@ -23,6 +23,9 @@ headerTemplateURL: function(){ return false; }, headerTitle: function(){ return ''; }, sortable: function(){ return false; }, + summary: function() { return false; }, + summaryClass: function(){ return ''; }, + summaryFilter: function(){ return false; }, show: function(){ return true; }, title: function(){ return ''; }, titleAlt: function(){ return ''; } diff --git a/src/scripts/ngTableController.js b/src/scripts/ngTableController.js index 6655675e..48c801ac 100644 --- a/src/scripts/ngTableController.js +++ b/src/scripts/ngTableController.js @@ -79,6 +79,7 @@ if (!$element.hasClass('ng-table')) { $scope.templates = { header: ($attrs.templateHeader ? $attrs.templateHeader : 'ng-table/header.html'), + footer: ($attrs.templateFooter ? $attrs.templateFooter : 'ng-table/footer.html'), pagination: ($attrs.templatePagination ? $attrs.templatePagination : 'ng-table/pager.html') }; $element.addClass('ng-table'); @@ -95,6 +96,17 @@ headerTemplate = angular.element(document.createElement('thead')).attr('ng-include', 'templates.header'); $element.prepend(headerTemplate); } + var footerTemplate = null; + var tfootFound = false; + angular.forEach($element.children(), function(e){ + if (e.tagName === 'TFOOT') { + theadFound = true; + } + }); + if (!tfootFound) { + footerTemplate = angular.element(document.createElement('tfoot')).attr('ng-include', 'templates.footer'); + $element.append(footerTemplate); + } var paginationTemplate = angular.element(document.createElement('div')).attr({ 'ng-table-pagination': 'params', 'template-url': 'templates.pagination' @@ -103,6 +115,9 @@ if (headerTemplate) { $compile(headerTemplate)($scope); } + if (footerTemplate) { + $compile(footerTemplate)($scope); + } $compile(paginationTemplate)($scope); } }; @@ -185,8 +200,6 @@ } }; - - function commonInit(){ ngTableEventsChannel.onAfterReloadData(bindDataToScope, $scope, isMyPublisher); ngTableEventsChannel.onPagesChanged(bindPagesToScope, $scope, isMyPublisher); diff --git a/src/scripts/ngTableParams.js b/src/scripts/ngTableParams.js index e66c609e..ac1dc66c 100644 --- a/src/scripts/ngTableParams.js +++ b/src/scripts/ngTableParams.js @@ -148,6 +148,20 @@ }) : settings.total; }; + /** + * @ngdoc method + * @name NgTableParams#summaryVaules + * @description If parameter summaryVaules not set return current summary else set current summaryVaules + * + * @param {string} summaryVaules + * @returns {Object|Number} Current summaryVaules or `this` + */ + this.summaryValues = function(summaryValues) { + return angular.isDefined(summaryValues) ? this.settings({ + 'summaryValues': summaryValues + }) : settings.summaryValues; + } + /** * @ngdoc method * @name NgTableParams#count @@ -615,5 +629,3 @@ return NgTableParams; }]); })(); - - diff --git a/src/scripts/ngTableSummaryRow.directive.js b/src/scripts/ngTableSummaryRow.directive.js new file mode 100644 index 00000000..8a879528 --- /dev/null +++ b/src/scripts/ngTableSummaryRow.directive.js @@ -0,0 +1,27 @@ +/** + * ngTable: Table + Angular JS + * + * @author Szymon Drosdzol + * @url https://github.com/sprzedamsanki/ng-table + * @license New BSD License + */ + + (function(){ + 'use strict'; + + angular.module('ngTable') + .directive('ngTableSummaryRow', ngTableSummaryRow); + + ngTableSummaryRow.$inject = []; + + function ngTableSummaryRow(){ + var directive = { + restrict: 'E', + replace: true, + templateUrl: 'ng-table/summaryRow.html', + scope: true, + controller: 'ngTableSummaryRowController' + }; + return directive; + } + })(); diff --git a/src/scripts/ngTableSummaryRowController.js b/src/scripts/ngTableSummaryRowController.js new file mode 100644 index 00000000..b55a0712 --- /dev/null +++ b/src/scripts/ngTableSummaryRowController.js @@ -0,0 +1,26 @@ +/** + * ngTable: Table + Angular JS + * + * @author Szymon Drosdzol + * @url https://github.com/sprzedamsanki/ng-table + * @license New BSD License + */ + +(function(){ + 'use strict'; + + angular.module('ngTable') + .controller('ngTableSummaryRowController', ngTableSummaryRowController); + + ngTableSummaryRowController.$inject = ['$scope']; + + function ngTableSummaryRowController($scope){ + $scope.params.settings().summaries = $scope.$columns.map(function($column){ + return $column.summary; + }); + + $scope.params.settings().summaryFilters = $scope.$columns.map(function($column){ + return $column.summaryFilter; + }); + } +})();