Skip to content

Commit

Permalink
add pagination directive
Browse files Browse the repository at this point in the history
  • Loading branch information
esvit committed Apr 12, 2014
1 parent d0397b8 commit 83c572f
Show file tree
Hide file tree
Showing 9 changed files with 107 additions and 138 deletions.
3 changes: 2 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,9 @@ module.exports = function (grunt) {
'src/scripts/03-*.js',
'src/scripts/04-*.js',
'src/scripts/05-*.js',
'src/scripts/06-*.js',
'./.temp/scripts/views.js',
'src/scripts/06-*.js'
'src/scripts/07-*.js'
],
dest: 'ng-table.js'
}
Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ For work in IE < 9 need jQuery, just add:
## Updates

### v0.3.2 (master)
- add pagination directive ngTablePagination [(see usage)](https://github.com/esvit/ng-table/blob/master/examples/demo28.html)
- rename filter.name to filter.$$name according to issue #196
- add debugMode setting
- add defaultSort setting
Expand Down
2 changes: 1 addition & 1 deletion examples/app/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ require.config({
paths: {
jquery: '../js/jquery-1.9.1.min',
angular: '../js/angular.min',
ngTable: '../../ng-table.src'
ngTable: '../../ng-table'
},
shim: {
'angular' : {'exports' : 'angular'}
Expand Down
19 changes: 17 additions & 2 deletions examples/demo28.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,27 @@
<link rel="stylesheet" href="../ng-table.css">
</head>
<body ng-app="main">
<h1>Table with data passed at init</h1>
<h1>Custom external pagination element</h1>

<div ng-controller="DemoCtrl">

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

<div ng-table-pagination="tableParams" template-url="'ng-table/pager.html'"></div>

<div ng-table-pagination="tableParams">
<ul class="pagination ng-table-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>

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

$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
count: 3 // count per page
}, {
total: 100,
data: data
});
})
Expand Down
65 changes: 60 additions & 5 deletions ng-table.js
Original file line number Diff line number Diff line change
Expand Up @@ -640,21 +640,76 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
pagination: (attrs.templatePagination ? attrs.templatePagination : 'ng-table/pager.html')
};
var headerTemplate = thead.length > 0 ? thead : angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');
var paginationTemplate = angular.element('<tfoot />').append(angular.element('<tr />').append(angular.element('<td />').attr({ 'ng-include': 'templates.pagination', 'colspan': columns.length })));
var paginationRow = angular.element(document.createElement('tr'))
.append(angular.element(document.createElement('td'))
.attr({
'ng-table-pagination': 'params',
'template-url': 'templates.pagination',
'colspan': columns.length
})),
paginationTemplate = angular.element(document.createElement('tfoot')).append(paginationRow);

element.find('thead').remove();
var tbody = element.find('tbody');
element.prepend(headerTemplate);

element.addClass('ng-table')
.prepend(headerTemplate)
.append(paginationTemplate);

$compile(headerTemplate)(scope);
$compile(paginationTemplate)(scope);
element.addClass('ng-table');
tbody.after(paginationTemplate);
}
};
}
}
}
]);

/**
* ngTable: Table + Angular JS
*
* @author Vitalii Savchuk <[email protected]>
* @url https://github.com/esvit/ng-table/
* @license New BSD License <http://creativecommons.org/licenses/BSD/>
*/

/**
* @ngdoc directive
* @name ngTable.directive:ngTablePagination
* @restrict A
*/
app.directive('ngTablePagination', ['$compile',
function ($compile) {
'use strict';

return {
restrict: 'A',
scope: {
'params': '=ngTablePagination',
'templateUrl': '='
},
replace: false,
link: function (scope, element, attrs) {

scope.$watch('params.$params', function (newParams, oldParams) {
scope.pages = scope.params.generatePagesArray(scope.params.page(), scope.params.total(), scope.params.count());
}, true);

scope.$watch('templateUrl', function(templateUrl) {
if (angular.isUndefined(templateUrl)) {
return;
}
var template = angular.element(document.createElement('div'))
template.attr({
'ng-include': 'templateUrl'
});
element.append(template);
$compile(template)(scope);
});
}
};
}
]);

angular.module('ngTable').run(['$templateCache', function ($templateCache) {
$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>');
$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>');
Expand Down
2 changes: 1 addition & 1 deletion ng-table.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ng-table.min.js

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion src/scripts/05-directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,8 @@ app.directive('ngTable', ['$compile', '$q', '$parse',
var paginationRow = angular.element(document.createElement('tr'))
.append(angular.element(document.createElement('td'))
.attr({
'ng-include': 'templates.pagination',
'ng-table-pagination': 'params',
'template-url': 'templates.pagination',
'colspan': columns.length
})),
paginationTemplate = angular.element(document.createElement('tfoot')).append(paginationRow);
Expand Down
148 changes: 22 additions & 126 deletions src/scripts/06-pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,142 +8,38 @@

/**
* @ngdoc directive
* @name ngTable.directive:ngTable
* @name ngTable.directive:ngTablePagination
* @restrict A
*
* @description
* Directive that instantiates {@link ngTable.directive:ngTable.ngTableController ngTableController}.
*/
app.directive('ngTable', ['$compile', '$q', '$parse',
function ($compile, $q, $parse) {
app.directive('ngTablePagination', ['$compile',
function ($compile) {
'use strict';

return {
restrict: 'A',
priority: 1001,
scope: true,
controller: ngTableController,
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);
if (!tr.hasClass('ng-table-group') && !row) {
row = tr;
}
});
if (!row) {
return;
}
angular.forEach(row.find('td'), function (item) {
var el = angular.element(item);
if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
scope: {
'params': '=ngTablePagination',
'templateUrl': '='
},
replace: false,
link: function (scope, element, attrs) {

scope.$watch('params.$params', function (newParams, oldParams) {
scope.pages = scope.params.generatePagesArray(scope.params.page(), scope.params.total(), scope.params.count());
}, true);

scope.$watch('templateUrl', function(templateUrl) {
if (angular.isUndefined(templateUrl)) {
return;
}
var parsedAttribute = function (attr, defaultValue) {
return function (scope) {
return $parse(el.attr('x-data-' + attr) || el.attr('data-' + attr) || el.attr(attr))(scope, {
$columns: columns
}) || defaultValue;
};
};

var parsedTitle = parsedAttribute('title', ' '),
headerTemplateURL = parsedAttribute('header', false),
filter = parsedAttribute('filter', false)(),
filterTemplateURL = false,
filterName = false;

if (filter && filter.$$name) {
filterName = filter.$$name;
delete filter.$$name;
}
if (filter && filter.templateURL) {
filterTemplateURL = filter.templateURL;
delete filter.templateURL;
}

el.attr('data-title-text', parsedTitle()); // this used in responsive table
columns.push({
id: i++,
title: parsedTitle,
sortable: parsedAttribute('sortable', false),
'class': el.attr('x-data-header-class') || el.attr('data-header-class') || el.attr('header-class'),
filter: filter,
filterTemplateURL: filterTemplateURL,
filterName: filterName,
headerTemplateURL: headerTemplateURL,
filterData: (el.attr("filter-data") ? el.attr("filter-data") : null),
show: (el.attr("ng-show") ? function (scope) {
return $parse(el.attr("ng-show"))(scope);
} : function () {
return true;
})
var template = angular.element(document.createElement('div'))
template.attr({
'ng-include': 'templateUrl'
});
element.append(template);
$compile(template)(scope);
});
return function (scope, element, attrs) {
scope.$loading = false;
scope.$columns = columns;

scope.$watch(attrs.ngTable, (function (params) {
if (angular.isUndefined(params)) {
return;
}
scope.paramsModel = $parse(attrs.ngTable);
scope.params = params;
}), true);
scope.parse = function (text) {
return angular.isDefined(text) ? text(scope) : '';
};
if (attrs.showFilter) {
scope.$parent.$watch(attrs.showFilter, function (value) {
scope.show_filter = value;
});
}
angular.forEach(columns, function (column) {
var def;
if (!column.filterData) {
return;
}
def = $parse(column.filterData)(scope, {
$column: column
});
if (!(angular.isObject(def) && angular.isObject(def.promise))) {
throw new Error('Function ' + column.filterData + ' must be instance of $q.defer()');
}
delete column.filterData;
return def.promise.then(function (data) {
if (!angular.isArray(data)) {
data = [];
}
data.unshift({
title: '-',
id: ''
});
column.data = data;
});
});
if (!element.hasClass('ng-table')) {
scope.templates = {
header: (attrs.templateHeader ? attrs.templateHeader : 'ng-table/header.html'),
pagination: (attrs.templatePagination ? attrs.templatePagination : 'ng-table/pager.html')
};
var headerTemplate = thead.length > 0 ? thead : angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');
var paginationTemplate = angular.element('<tfoot />').append(angular.element('<tr />').append(angular.element('<td />').attr({ 'ng-include': 'templates.pagination', 'colspan': columns.length })));
element.find('thead').remove();
var tbody = element.find('tbody');
element.prepend(headerTemplate);
$compile(headerTemplate)(scope);
$compile(paginationTemplate)(scope);
element.addClass('ng-table');
tbody.after(paginationTemplate);
}
};
}
}
};
}
]);

0 comments on commit 83c572f

Please sign in to comment.