angular2-data-table
Version:
angular2-data-table is a Angular2 component for presenting large and complex data.
115 lines • 5.09 kB
JavaScript
"use strict";
var core_1 = require('@angular/core');
var DataTablePagerComponent = (function () {
function DataTablePagerComponent() {
this.change = new core_1.EventEmitter();
this._count = 0;
this._page = 1;
this._size = 0;
}
Object.defineProperty(DataTablePagerComponent.prototype, "size", {
get: function () {
return this._size;
},
set: function (val) {
this._size = val;
this.pages = this.calcPages();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTablePagerComponent.prototype, "count", {
get: function () {
return this._count;
},
set: function (val) {
this._count = val;
this.pages = this.calcPages();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTablePagerComponent.prototype, "page", {
get: function () {
return this._page;
},
set: function (val) {
this._page = val;
this.pages = this.calcPages();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataTablePagerComponent.prototype, "totalPages", {
get: function () {
var count = this.size < 1 ? 1 : Math.ceil(this.count / this.size);
return Math.max(count || 0, 1);
},
enumerable: true,
configurable: true
});
DataTablePagerComponent.prototype.canPrevious = function () {
return this.page > 1;
};
DataTablePagerComponent.prototype.canNext = function () {
return this.page < this.totalPages;
};
DataTablePagerComponent.prototype.prevPage = function () {
this.selectPage(this.page - 1);
};
DataTablePagerComponent.prototype.nextPage = function () {
this.selectPage(this.page + 1);
};
DataTablePagerComponent.prototype.selectPage = function (page) {
if (page > 0 && page <= this.totalPages && page !== this.page) {
this.page = page;
this.change.emit({
page: page
});
}
};
DataTablePagerComponent.prototype.calcPages = function (page) {
var pages = [];
var startPage = 1;
var endPage = this.totalPages;
var maxSize = 5;
var isMaxSized = maxSize < this.totalPages;
page = page || this.page;
if (isMaxSized) {
startPage = ((Math.ceil(page / maxSize) - 1) * maxSize) + 1;
endPage = Math.min(startPage + maxSize - 1, this.totalPages);
}
for (var num = startPage; num <= endPage; num++) {
pages.push({
number: num,
text: num
});
}
return pages;
};
DataTablePagerComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'datatable-pager',
template: "\n <ul class=\"pager\">\n <li [class.disabled]=\"!canPrevious()\">\n <a\n href=\"javascript:void(0)\"\n (click)=\"selectPage(1)\">\n <i class=\"{{pagerPreviousIcon}}\"></i>\n </a>\n </li>\n <li [class.disabled]=\"!canPrevious()\">\n <a\n href=\"javascript:void(0)\"\n (click)=\"prevPage()\">\n <i class=\"{{pagerLeftArrowIcon}}\"></i>\n </a>\n </li>\n <li\n class=\"pages\"\n *ngFor=\"let pg of pages\"\n [class.active]=\"pg.number === page\">\n <a\n href=\"javascript:void(0)\"\n (click)=\"selectPage(pg.number)\">\n {{pg.text}}\n </a>\n </li>\n <li [class.disabled]=\"!canNext()\">\n <a\n href=\"javascript:void(0)\"\n (click)=\"nextPage()\">\n <i class=\"{{pagerRightArrowIcon}}\"></i>\n </a>\n </li>\n <li [class.disabled]=\"!canNext()\">\n <a\n href=\"javascript:void(0)\"\n (click)=\"selectPage(totalPages)\">\n <i class=\"{{pagerNextIcon}}\"></i>\n </a>\n </li>\n </ul>\n ",
host: {
class: 'datatable-pager'
},
changeDetection: core_1.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
DataTablePagerComponent.ctorParameters = function () { return []; };
DataTablePagerComponent.propDecorators = {
'pagerLeftArrowIcon': [{ type: core_1.Input },],
'pagerRightArrowIcon': [{ type: core_1.Input },],
'pagerPreviousIcon': [{ type: core_1.Input },],
'pagerNextIcon': [{ type: core_1.Input },],
'size': [{ type: core_1.Input },],
'count': [{ type: core_1.Input },],
'page': [{ type: core_1.Input },],
'change': [{ type: core_1.Output },],
};
return DataTablePagerComponent;
}());
exports.DataTablePagerComponent = DataTablePagerComponent;
//# sourceMappingURL=pager.component.js.map