Fixed twbs#89

Add support of custom header
SumTotalSystems · Nov 5, 2013 · f9102c2 · f9102c2
1 parent 6eeb595
commit f9102c2
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 95 deletions.
diff --git a/examples/demo18.html b/examples/demo18.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+    <!--[if lt IE 9]>
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <![endif]-->
+    <script src="js/angular.min.js"></script>
+    <script src="../ng-table.src.js"></script>
+    <link rel="stylesheet" href="../ng-table.css">
+</head>
+<body ng-app="main">
+<h1>Custom header</h1>
+
+<div ng-controller="DemoCtrl">
+
+    <table ng-table="tableParams" class="table">
+        <thead>
+            <tr>
+                <th class="sortable" ng-class="{
+                    'sort-asc': tableParams.isSortBy('name', 'asc'),
+                    'sort-desc': tableParams.isSortBy('name', 'desc')
+                  }"
+                    ng-click="tableParams.sorting({'name' : tableParams.isSortBy('name', 'asc') ? 'desc' : 'asc'})" rowspan="2">
+                    <div><i class="glyphicon glyphicon-user"></i> Name</div>
+                </th>
+                <th colspan="2" class="text-center">Data</th>
+            </tr>
+            <tr>
+                <th class="text-center sortable" ng-class="{
+                    'sort-asc': tableParams.isSortBy('age', 'asc'),
+                    'sort-desc': tableParams.isSortBy('age', 'desc')
+                  }"
+                    ng-click="tableParams.sorting({'age' : tableParams.isSortBy('age', 'asc') ? 'desc' : 'asc'})">
+                    <div>Age</div>
+                </th>
+                <th class="text-center">etc...</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr ng-repeat="user in $data">
+                <td data-title="'Name'" sortable="name">
+                    {{user.name}}
+                </td>
+                <td data-title="'Age'" width="200">
+                    {{user.age}}
+                </td>
+                <td data-title="'With default braces'" width="200">
+                    {{user.age}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <script>
+        var app = angular.module('main', ['ngTable'])
+                .controller('DemoCtrl', function($scope, ngTableParams, $filter) {
+                    var data = [{name: "Moroni", age: 50},
+                        {name: "Tiancum", age: 43},
+                        {name: "Jacob", age: 27},
+                        {name: "Nephi", age: 29},
+                        {name: "Enos", age: 34},
+                        {name: "Tiancum", age: 43},
+                        {name: "Jacob", age: 27},
+                        {name: "Nephi", age: 29},
+                        {name: "Enos", age: 34},
+                        {name: "Tiancum", age: 43},
+                        {name: "Jacob", age: 27},
+                        {name: "Nephi", age: 29},
+                        {name: "Enos", age: 34},
+                        {name: "Tiancum", age: 43},
+                        {name: "Jacob", age: 27},
+                        {name: "Nephi", age: 29},
+                        {name: "Enos", age: 34}];
+
+                    $scope.tableParams = new ngTableParams({
+                        page: 1,            // show first page
+                        count: 10           // count per page
+                    }, {
+                        total: data.length, // length of data
+                        getData: function($defer, params) {
+                            // use build-in angular filter
+                            var orderedData = params.sorting() ?
+                                    $filter('orderBy')(data, params.orderBy()) :
+                                    data;
+
+                            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+                        }
+                    });
+                });
+    </script>
+
+</div>
+
+
+</body>
+</html>
diff --git a/examples/demo7.html b/examples/demo7.html
@@ -22,7 +22,7 @@ <h1>Table with hidden pagination</h1>
 <div ng-controller="DemoCtrl">
 
         <table ng-table="tableParams" class="table">
-            <tr ng-repeat="user in users">
+            <tr ng-repeat="user in $data">
                 <td data-title="'Name'">
                     {{user.name}}
                 </td>

diff --git a/ng-table.js b/ng-table.js
diff --git a/ng-table.map b/ng-table.map
diff --git a/ng-table.src.js b/ng-table.src.js
@@ -186,6 +186,20 @@ app.factory('ngTableParams', ['$q', function ($q) {
             return angular.isDefined(sorting) ? this.parameters({'sorting': sorting}) : params.sorting;
         };
 
+        /**
+         * @ngdoc method
+         * @name ngTable.factory:ngTableParams#isSortBy
+         * @methodOf ngTable.factory:ngTableParams
+         * @description Checks sort field
+         *
+         * @param {string} field     Field name
+         * @param {string} direction Direction of sorting 'asc' or 'desc'
+         * @returns {Array} Return true if field sorted by direction
+         */
+        this.isSortBy = function (field, direction) {
+            return angular.isDefined(params.sorting[field]) && params.sorting[field] == direction;
+        };
+
         /**
          * @ngdoc method
          * @name ngTable.factory:ngTableParams#orderBy
@@ -422,51 +436,7 @@ var ngTableController = ['$scope', 'ngTableParams', '$q', function($scope, ngTab
         $scope.params.settings().$scope = $scope;
         $scope.params.reload();
     }, true);
-/*
-    var updateParams = function (newParams) {
-        newParams = angular.extend($scope.params, newParams);
-        $scope.$groups = $scope.params.getGroups($scope.params.settings().groupBy);
-        if ($scope.paramsModel) {
-            $scope.paramsModel.assign($scope.$parent, new ngTableParams(newParams));
-        }
-        $scope.params = angular.copy(newParams);
-    };
-
-    // update result every time filter changes
-    $scope.$watch('params.filter', function (value) {
-        if ($scope.params.$liveFiltering) {
-            updateParams({
-                filter: value
-            });
-            $scope.goToPage(1);
-        }
-    }, true);
-    $scope.$watch('params.sorting', (function (value) {
-        updateParams({
-            sorting: value
-        });
-    }), true);
 
-    // goto page
-    $scope.goToPage = function (page) {
-        if (page > 0 && $scope.params.page !== page && $scope.params.count * (page - 1) <= $scope.params.total) {
-            updateParams({
-                page: page
-            });
-        }
-    };
-    // change items per page
-    $scope.changeCount = function (count) {
-        updateParams({
-            page: 1,
-            count: count
-        });
-    };
-    $scope.doFilter = function () {
-        updateParams({
-            page: 1
-        });
-    };*/
     $scope.sortBy = function (column) {
         var sorting, sortingParams;
         if (!column.sortable) {
@@ -508,6 +478,9 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
             compile: function (element) {
                 var columns = [], i = 0, row = null;
 
+                // custom header
+                var thead = element.find('thead');
+
                 // IE 8 fix :not(.ng-table-group) selector
                 angular.forEach(angular.element(element.find('tr')), function(tr) {
                     tr = angular.element(tr);
@@ -602,7 +575,7 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
                             header: (attrs.templateHeader ? attrs.templateHeader : 'ng-table/header.html'),
                             pagination: (attrs.templatePagination ? attrs.templatePagination : 'ng-table/pager.html')
                         };
-                        var headerTemplate = angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');
+                        var headerTemplate = thead.length > 0 ? thead : angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');
                         var paginationTemplate = angular.element(document.createElement('div')).attr('ng-include', 'templates.pagination');
                         element.find('thead').remove();
                         var tbody = element.find('tbody');
@@ -621,8 +594,8 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
 angular.module('ngTable').run(['$templateCache', function ($templateCache) {
 	$templateCache.put('ng-table/filters/select.html', '<select ng-options="data.id as data.title for data in column.data" ng-model="params.filter()[name]" ng-show="filter==\'select\'" class="filter filter-select form-control"> </select>');
 	$templateCache.put('ng-table/filters/text.html', '<input type="text" ng-model="params.filter()[name]" ng-if="filter==\'text\'" class="input-filter form-control"/>');
-	$templateCache.put('ng-table/header.html', '<tr> <th ng-repeat="column in $columns" ng-class="{ \'sortable\': column.sortable, \'sort-asc\': params.sorting()[column.sortable]==\'asc\', \'sort-desc\': params.sorting()[column.sortable]==\'desc\', column.class: true }" ng-click="sortBy(column)" ng-show="column.show(this)" ng-init="template=column.headerTemplateURL(this)" class="header"> <div ng-if="!template" ng-bind="parse(column.title)"></div> <div ng-if="template"><div ng-include="template"></div></div> </th> </tr> <tr ng-show="show_filter" class="ng-table-filters"> <th ng-repeat="column in $columns" ng-show="column.show(this)" data-title-text="{{column.title}}" class="filter"> <form ng-submit="doFilter()"> <input type="submit" tabindex="-1" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/> <div ng-repeat="(name, filter) in column.filter"> <div ng-if="column.filterTemplateURL"> <div ng-include="column.filterTemplateURL"></div> </div> <div ng-if="!column.filterTemplateURL"> <div ng-include="\'ng-table/filters/\' + filter + \'.html\'"></div> </div> </div> </form> </th> </tr>');
-	$templateCache.put('ng-table/pager.html', '<div class="ng-cloak"> <div ng-if="params.settings().counts.length" class="btn-group pull-right"> <button ng-repeat="count in params.settings().counts" type="button" ng-class="{\'active\':params.count()==count}" ng-click="params.count(count)" class="btn btn-default btn-xs"> {{count}} </button> </div> <ul class="pagination"> <li ng-class="{\'disabled\': !page.active}" ng-repeat="page in pages" ng-switch="page.type"> <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo;</a> <a ng-switch-when="first" ng-click="params.page(page.number)" href="">{{page.number}}</a> <a ng-switch-when="page" ng-click="params.page(page.number)" href="">{{page.number}}</a> <a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a> <a ng-switch-when="last" ng-click="params.page(page.number)" href="">{{page.number}}</a> <a ng-switch-when="next" ng-click="params.page(page.number)" href="">&raquo;</a> </li> </ul> </div>');
+	$templateCache.put('ng-table/header.html', '<tr> <th ng-repeat="column in $columns" ng-class="{ \'sortable\': column.sortable, \'sort-asc\': params.sorting()[column.sortable]==\'asc\', \'sort-desc\': params.sorting()[column.sortable]==\'desc\', column.class: true }" ng-click="sortBy(column)" ng-show="column.show(this)" ng-init="template=column.headerTemplateURL(this)" class="header"> <div ng-if="!template" ng-bind="parse(column.title)"></div> <div ng-if="template"><div ng-include="template"></div></div> </th> </tr> <tr ng-show="show_filter" class="ng-table-filters"> <th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter"> <div ng-repeat="(name, filter) in column.filter"> <div ng-if="column.filterTemplateURL"> <div ng-include="column.filterTemplateURL"></div> </div> <div ng-if="!column.filterTemplateURL"> <div ng-include="\'ng-table/filters/\' + filter + \'.html\'"></div> </div> </div> </th> </tr>');
+	$templateCache.put('ng-table/pager.html', '<div class="ng-cloak"> <div ng-if="params.settings().counts.length" class="btn-group pull-right"> <button ng-repeat="count in params.settings().counts" type="button" ng-class="{\'active\':params.count()==count}" ng-click="params.count(count)" class="btn btn-default btn-xs"> <span ng-bind="count"></span> </button> </div> <ul class="pagination"> <li ng-class="{\'disabled\': !page.active}" ng-repeat="page in pages" ng-switch="page.type"> <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo;</a> <a ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a> <a ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a> <a ng-switch-when="next" ng-click="params.page(page.number)" href="">&raquo;</a> </li> </ul> </div>');
 }]);
     return app;
 }));
diff --git a/src/scripts/03-params.js b/src/scripts/03-params.js
@@ -140,6 +140,20 @@ app.factory('ngTableParams', ['$q', function ($q) {
             return angular.isDefined(sorting) ? this.parameters({'sorting': sorting}) : params.sorting;
         };
 
+        /**
+         * @ngdoc method
+         * @name ngTable.factory:ngTableParams#isSortBy
+         * @methodOf ngTable.factory:ngTableParams
+         * @description Checks sort field
+         *
+         * @param {string} field     Field name
+         * @param {string} direction Direction of sorting 'asc' or 'desc'
+         * @returns {Array} Return true if field sorted by direction
+         */
+        this.isSortBy = function (field, direction) {
+            return angular.isDefined(params.sorting[field]) && params.sorting[field] == direction;
+        };
+
         /**
          * @ngdoc method
          * @name ngTable.factory:ngTableParams#orderBy

diff --git a/src/scripts/04-controller.js b/src/scripts/04-controller.js
@@ -25,51 +25,7 @@ var ngTableController = ['$scope', 'ngTableParams', '$q', function($scope, ngTab
         $scope.params.settings().$scope = $scope;
         $scope.params.reload();
     }, true);
-/*
-    var updateParams = function (newParams) {
-        newParams = angular.extend($scope.params, newParams);
-        $scope.$groups = $scope.params.getGroups($scope.params.settings().groupBy);
-        if ($scope.paramsModel) {
-            $scope.paramsModel.assign($scope.$parent, new ngTableParams(newParams));
-        }
-        $scope.params = angular.copy(newParams);
-    };
-
-    // update result every time filter changes
-    $scope.$watch('params.filter', function (value) {
-        if ($scope.params.$liveFiltering) {
-            updateParams({
-                filter: value
-            });
-            $scope.goToPage(1);
-        }
-    }, true);
-    $scope.$watch('params.sorting', (function (value) {
-        updateParams({
-            sorting: value
-        });
-    }), true);
 
-    // goto page
-    $scope.goToPage = function (page) {
-        if (page > 0 && $scope.params.page !== page && $scope.params.count * (page - 1) <= $scope.params.total) {
-            updateParams({
-                page: page
-            });
-        }
-    };
-    // change items per page
-    $scope.changeCount = function (count) {
-        updateParams({
-            page: 1,
-            count: count
-        });
-    };
-    $scope.doFilter = function () {
-        updateParams({
-            page: 1
-        });
-    };*/
     $scope.sortBy = function (column) {
         var sorting, sortingParams;
         if (!column.sortable) {

diff --git a/src/scripts/05-directive.js b/src/scripts/05-directive.js
@@ -26,6 +26,9 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
             compile: function (element) {
                 var columns = [], i = 0, row = null;
 
+                // custom header
+                var thead = element.find('thead');
+
                 // IE 8 fix :not(.ng-table-group) selector
                 angular.forEach(angular.element(element.find('tr')), function(tr) {
                     tr = angular.element(tr);
@@ -120,7 +123,7 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
                             header: (attrs.templateHeader ? attrs.templateHeader : 'ng-table/header.html'),
                             pagination: (attrs.templatePagination ? attrs.templatePagination : 'ng-table/pager.html')
                         };
-                        var headerTemplate = angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');
+                        var headerTemplate = thead.length > 0 ? thead : angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');
                         var paginationTemplate = angular.element(document.createElement('div')).attr('ng-include', 'templates.pagination');
                         element.find('thead').remove();
                         var tbody = element.find('tbody');