Skip to content

Commit 83c572f

Browse files
esvitesvit
committed
add pagination directive
1 parent d0397b8 commit 83c572f

File tree

9 files changed

+107
-138
lines changed

9 files changed

+107
-138
lines changed

‎Gruntfile.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,9 @@ module.exports = function (grunt) {
6161
'src/scripts/03-*.js',
6262
'src/scripts/04-*.js',
6363
'src/scripts/05-*.js',
64+
'src/scripts/06-*.js',
6465
'./.temp/scripts/views.js',
65-
'src/scripts/06-*.js'
66+
'src/scripts/07-*.js'
6667
],
6768
dest: 'ng-table.js'
6869
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ For work in IE < 9 need jQuery, just add:
2323
## Updates
2424

2525
### v0.3.2 (master)
26+
- add pagination directive ngTablePagination [(see usage)](https://github.com/esvit/ng-table/blob/master/examples/demo28.html)
2627
- rename filter.name to filter.$$name according to issue #196
2728
- add debugMode setting
2829
- add defaultSort setting

‎examples/app/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ require.config({
22
paths: {
33
jquery: '../js/jquery-1.9.1.min',
44
angular: '../js/angular.min',
5-
ngTable: '../../ng-table.src'
5+
ngTable: '../../ng-table'
66
},
77
shim: {
88
'angular' : {'exports' : 'angular'}

‎examples/demo28.html

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,27 @@
1818
<link rel="stylesheet" href="../ng-table.css">
1919
</head>
2020
<body ng-app="main">
21-
<h1>Table with data passed at init</h1>
21+
<h1>Custom external pagination element</h1>
2222

2323
<div ng-controller="DemoCtrl">
2424

2525
<p><strong>Page:</strong> {{tableParams.page()}}
2626
<p><strong>Count per page:</strong> {{tableParams.count()}}
2727

28+
<div ng-table-pagination="tableParams" template-url="'ng-table/pager.html'"></div>
29+
30+
<div ng-table-pagination="tableParams">
31+
<ul class="pagination ng-table-pagination">
32+
<li ng-class="{'disabled': !page.active}" ng-repeat="page in pages" ng-switch="page.type">
33+
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo;</a>
34+
<a ng-switch-when="first" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a>
35+
<a ng-switch-when="page" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a>
36+
<a ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a>
37+
<a ng-switch-when="last" ng-click="params.page(page.number)" href=""><span ng-bind="page.number"></span></a>
38+
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">&raquo;</a>
39+
</li>
40+
</ul>
41+
</div>
2842

2943
<table ng-table="tableParams" class="table ng-table-responsive">
3044
<tr ng-repeat="user in $data">
@@ -60,8 +74,9 @@ <h1>Table with data passed at init</h1>
6074

6175
$scope.tableParams = new ngTableParams({
6276
page: 1, // show first page
63-
count: 10 // count per page
77+
count: 3 // count per page
6478
}, {
79+
total: 100,
6580
data: data
6681
});
6782
})

‎ng-table.js

Lines changed: 60 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -640,21 +640,76 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
640640
pagination: (attrs.templatePagination ? attrs.templatePagination : 'ng-table/pager.html')
641641
};
642642
var headerTemplate = thead.length > 0 ? thead : angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');
643-
var paginationTemplate = angular.element('<tfoot />').append(angular.element('<tr />').append(angular.element('<td />').attr({ 'ng-include': 'templates.pagination', 'colspan': columns.length })));
643+
var paginationRow = angular.element(document.createElement('tr'))
644+
.append(angular.element(document.createElement('td'))
645+
.attr({
646+
'ng-table-pagination': 'params',
647+
'template-url': 'templates.pagination',
648+
'colspan': columns.length
649+
})),
650+
paginationTemplate = angular.element(document.createElement('tfoot')).append(paginationRow);
651+
644652
element.find('thead').remove();
645-
var tbody = element.find('tbody');
646-
element.prepend(headerTemplate);
653+
654+
element.addClass('ng-table')
655+
.prepend(headerTemplate)
656+
.append(paginationTemplate);
657+
647658
$compile(headerTemplate)(scope);
648659
$compile(paginationTemplate)(scope);
649-
element.addClass('ng-table');
650-
tbody.after(paginationTemplate);
651660
}
652661
};
653662
}
654663
}
655664
}
656665
]);
657666

667+
/**
668+
* ngTable: Table + Angular JS
669+
*
670+
* @author Vitalii Savchuk <[email protected]>
671+
* @url https://github.com/esvit/ng-table/
672+
* @license New BSD License <http://creativecommons.org/licenses/BSD/>
673+
*/
674+
675+
/**
676+
* @ngdoc directive
677+
* @name ngTable.directive:ngTablePagination
678+
* @restrict A
679+
*/
680+
app.directive('ngTablePagination', ['$compile',
681+
function ($compile) {
682+
'use strict';
683+
684+
return {
685+
restrict: 'A',
686+
scope: {
687+
'params': '=ngTablePagination',
688+
'templateUrl': '='
689+
},
690+
replace: false,
691+
link: function (scope, element, attrs) {
692+
693+
scope.$watch('params.$params', function (newParams, oldParams) {
694+
scope.pages = scope.params.generatePagesArray(scope.params.page(), scope.params.total(), scope.params.count());
695+
}, true);
696+
697+
scope.$watch('templateUrl', function(templateUrl) {
698+
if (angular.isUndefined(templateUrl)) {
699+
return;
700+
}
701+
var template = angular.element(document.createElement('div'))
702+
template.attr({
703+
'ng-include': 'templateUrl'
704+
});
705+
element.append(template);
706+
$compile(template)(scope);
707+
});
708+
}
709+
};
710+
}
711+
]);
712+
658713
angular.module('ngTable').run(['$templateCache', function ($templateCache) {
659714
$templateCache.put('ng-table/filters/select-multiple.html', '<select ng-options="data.id as data.title for data in column.data" multiple ng-multiple="true" ng-model="params.filter()[name]" ng-show="filter==\'select-multiple\'" class="filter filter-select-multiple form-control" name="{{column.filterName}}"> </select>');
660715
$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" name="{{column.filterName}}"> </select>');

‎ng-table.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ng-table.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/scripts/05-directive.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,8 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
136136
var paginationRow = angular.element(document.createElement('tr'))
137137
.append(angular.element(document.createElement('td'))
138138
.attr({
139-
'ng-include': 'templates.pagination',
139+
'ng-table-pagination': 'params',
140+
'template-url': 'templates.pagination',
140141
'colspan': columns.length
141142
})),
142143
paginationTemplate = angular.element(document.createElement('tfoot')).append(paginationRow);

‎src/scripts/06-pagination.js

Lines changed: 22 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -8,142 +8,38 @@
88

99
/**
1010
* @ngdoc directive
11-
* @name ngTable.directive:ngTable
11+
* @name ngTable.directive:ngTablePagination
1212
* @restrict A
13-
*
14-
* @description
15-
* Directive that instantiates {@link ngTable.directive:ngTable.ngTableController ngTableController}.
1613
*/
17-
app.directive('ngTable', ['$compile', '$q', '$parse',
18-
function ($compile, $q, $parse) {
14+
app.directive('ngTablePagination', ['$compile',
15+
function ($compile) {
1916
'use strict';
2017

2118
return {
2219
restrict: 'A',
23-
priority: 1001,
24-
scope: true,
25-
controller: ngTableController,
26-
compile: function (element) {
27-
var columns = [], i = 0, row = null;
28-
29-
// custom header
30-
var thead = element.find('thead');
31-
32-
// IE 8 fix :not(.ng-table-group) selector
33-
angular.forEach(angular.element(element.find('tr')), function (tr) {
34-
tr = angular.element(tr);
35-
if (!tr.hasClass('ng-table-group') && !row) {
36-
row = tr;
37-
}
38-
});
39-
if (!row) {
40-
return;
41-
}
42-
angular.forEach(row.find('td'), function (item) {
43-
var el = angular.element(item);
44-
if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
20+
scope: {
21+
'params': '=ngTablePagination',
22+
'templateUrl': '='
23+
},
24+
replace: false,
25+
link: function (scope, element, attrs) {
26+
27+
scope.$watch('params.$params', function (newParams, oldParams) {
28+
scope.pages = scope.params.generatePagesArray(scope.params.page(), scope.params.total(), scope.params.count());
29+
}, true);
30+
31+
scope.$watch('templateUrl', function(templateUrl) {
32+
if (angular.isUndefined(templateUrl)) {
4533
return;
4634
}
47-
var parsedAttribute = function (attr, defaultValue) {
48-
return function (scope) {
49-
return $parse(el.attr('x-data-' + attr) || el.attr('data-' + attr) || el.attr(attr))(scope, {
50-
$columns: columns
51-
}) || defaultValue;
52-
};
53-
};
54-
55-
var parsedTitle = parsedAttribute('title', ' '),
56-
headerTemplateURL = parsedAttribute('header', false),
57-
filter = parsedAttribute('filter', false)(),
58-
filterTemplateURL = false,
59-
filterName = false;
60-
61-
if (filter && filter.$$name) {
62-
filterName = filter.$$name;
63-
delete filter.$$name;
64-
}
65-
if (filter && filter.templateURL) {
66-
filterTemplateURL = filter.templateURL;
67-
delete filter.templateURL;
68-
}
69-
70-
el.attr('data-title-text', parsedTitle()); // this used in responsive table
71-
columns.push({
72-
id: i++,
73-
title: parsedTitle,
74-
sortable: parsedAttribute('sortable', false),
75-
'class': el.attr('x-data-header-class') || el.attr('data-header-class') || el.attr('header-class'),
76-
filter: filter,
77-
filterTemplateURL: filterTemplateURL,
78-
filterName: filterName,
79-
headerTemplateURL: headerTemplateURL,
80-
filterData: (el.attr("filter-data") ? el.attr("filter-data") : null),
81-
show: (el.attr("ng-show") ? function (scope) {
82-
return $parse(el.attr("ng-show"))(scope);
83-
} : function () {
84-
return true;
85-
})
35+
var template = angular.element(document.createElement('div'))
36+
template.attr({
37+
'ng-include': 'templateUrl'
8638
});
39+
element.append(template);
40+
$compile(template)(scope);
8741
});
88-
return function (scope, element, attrs) {
89-
scope.$loading = false;
90-
scope.$columns = columns;
91-
92-
scope.$watch(attrs.ngTable, (function (params) {
93-
if (angular.isUndefined(params)) {
94-
return;
95-
}
96-
scope.paramsModel = $parse(attrs.ngTable);
97-
scope.params = params;
98-
}), true);
99-
scope.parse = function (text) {
100-
return angular.isDefined(text) ? text(scope) : '';
101-
};
102-
if (attrs.showFilter) {
103-
scope.$parent.$watch(attrs.showFilter, function (value) {
104-
scope.show_filter = value;
105-
});
106-
}
107-
angular.forEach(columns, function (column) {
108-
var def;
109-
if (!column.filterData) {
110-
return;
111-
}
112-
def = $parse(column.filterData)(scope, {
113-
$column: column
114-
});
115-
if (!(angular.isObject(def) && angular.isObject(def.promise))) {
116-
throw new Error('Function ' + column.filterData + ' must be instance of $q.defer()');
117-
}
118-
delete column.filterData;
119-
return def.promise.then(function (data) {
120-
if (!angular.isArray(data)) {
121-
data = [];
122-
}
123-
data.unshift({
124-
title: '-',
125-
id: ''
126-
});
127-
column.data = data;
128-
});
129-
});
130-
if (!element.hasClass('ng-table')) {
131-
scope.templates = {
132-
header: (attrs.templateHeader ? attrs.templateHeader : 'ng-table/header.html'),
133-
pagination: (attrs.templatePagination ? attrs.templatePagination : 'ng-table/pager.html')
134-
};
135-
var headerTemplate = thead.length > 0 ? thead : angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');
136-
var paginationTemplate = angular.element('<tfoot />').append(angular.element('<tr />').append(angular.element('<td />').attr({ 'ng-include': 'templates.pagination', 'colspan': columns.length })));
137-
element.find('thead').remove();
138-
var tbody = element.find('tbody');
139-
element.prepend(headerTemplate);
140-
$compile(headerTemplate)(scope);
141-
$compile(paginationTemplate)(scope);
142-
element.addClass('ng-table');
143-
tbody.after(paginationTemplate);
144-
}
145-
};
14642
}
147-
}
43+
};
14844
}
14945
]);

0 commit comments

Comments
 (0)