bootstrangular-datatable
Version:
Este es un simple modulo de tabla interactiva al estilo de Angular, Bootstrap y Datatable. Necesita angular/core, bootstrap y sus dependencias (jquery y popper) para funcionar.
2 lines • 8.65 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("bootstrangular-datatable",["exports","@angular/core","@angular/common"],e):e((t=t||self)["bootstrangular-datatable"]={},t.ng.core,t.ng.common)}(this,(function(t,e,n){"use strict";var a=function(){function t(){this.pageSizeOptions=[],this.pageIndex=1,this.showNumeration=!1,this.showSearcher=!0,this.showSizeOptions=!0,this.showPaginator=!0}return t.prototype.ngOnInit=function(){this.checkPageSize()},t.prototype.getDataSource=function(){return this.filterText?this.dataSourceFilter:this.dataSource},t.prototype.getPageData=function(){return this.getDataSource().slice(this.getPageRowStart()-1,this.getPageRowEnd())},t.prototype.getPageRowStart=function(){return this.pageSize*this.pageIndex-(this.pageSize-1)},t.prototype.getPageRowEnd=function(){return this.pageIndex===this.getLastPage()?this.getPageRowStart()+(this.getDataSource().length-this.getPageRowStart()):this.pageSize*this.pageIndex},t.prototype.goFirstPage=function(){this.pageIndex=1},t.prototype.goPreviousPage=function(){this.pageIndex--},t.prototype.goNextPage=function(){this.pageIndex++},t.prototype.goLastPage=function(){this.pageIndex=this.getLastPage()},t.prototype.getLastPage=function(){return this.getDataSource().length%this.pageSize!=0?Math.floor(this.getDataSource().length/this.pageSize)+1:Math.floor(this.getDataSource().length/this.pageSize)},t.prototype.changePageSize=function(t){var e=this.pageIndex===this.getLastPage();this.pageSize=t,(this.pageIndex>=this.getLastPage()||e)&&this.goLastPage()},t.prototype.checkPageSize=function(){var t=this;this.pageSize?this.pageSizeOptions.find((function(e){return e===t.pageSize}))||this.addPageSizeToPageSizeOptions():(this.pageSizeOptions.length||this.pageSizeOptions.push(this.dataSource.length),this.pageSize=this.pageSizeOptions[0])},t.prototype.addPageSizeToPageSizeOptions=function(){this.pageSizeOptions.push(this.pageSize),this.pageSizeOptions.sort((function(t,e){return t-e}))},t.prototype.getHeaders=function(){var t=this;return this.headers?Object.keys(this.headers).map((function(e){return{id:e,value:t.headers[e]}})):Object.keys(this.dataSource[1]).map((function(t){return{id:t,value:t}}))},t.prototype.applyFilter=function(t){var e=this;t.trim()?(this.filterText=t.trim().toLowerCase(),this.dataSourceFilter=this.dataSource.filter((function(t){return e.getHeaders().map((function(n){return t[n.id].trim().toLowerCase().includes(e.filterText)})).some((function(t){return t}))})),this.pageIndex>this.getLastPage()&&this.goLastPage()):(this.filterText=void 0,this.goFirstPage())},t}();a.decorators=[{type:e.Component,args:[{selector:"datatable",template:'<div class="row">\n <div class="col-md-6">\n <div *ngIf="tableBtnOptions" class="btn-group btn-group-sm mr-2 mb-2" role="group">\n <button *ngFor="let btnTable of tableBtnOptions"\n (click)="btnTable.action()"\n type="button"\n class="btn btn-secondary"\n data-toggle="tooltip"\n data-placement="bottom"\n [title]="btnTable.title">\n <div *ngIf="btnTable.icon; then btnTableIcon; else btnTableTitle"></div>\n <ng-template #btnTableIcon>\n <i *ngIf="btnTable.icon.origin === \'bootstrap\'" [class]="btnTable.icon.icon"></i>\n <img *ngIf="btnTable.icon.origin === \'img\'" [attr.src]="btnTable.icon.icon" class="img-icon">\n </ng-template>\n <ng-template #btnTableTitle>{{btnTable.title}}</ng-template>\n </button>\n </div>\n </div>\n <div class="col-md-6">\n <div *ngIf="showSearcher" class="input-group input-group-sm mb-2">\n <div class="input-group-prepend">\n <div class="input-group-text" id="btnGroupAddon">🔎</div>\n </div>\n <input type="text" class="form-control"\n placeholder="Buscar en la tabla" aria-label="Buscar en la tabla"\n (keyup)="applyFilter($event.target.value)">\n </div>\n </div>\n</div>\n\n<div class="table-responsive">\n <table class="table table-bordered table-sm table-striped">\n <thead>\n <tr>\n <th *ngIf="showNumeration">#\x3c!--span class="text-muted float-right">⬇️⬆️</span--\x3e</th>\n <th *ngFor="let head of getHeaders()">{{head.value}}</th>\n <th *ngIf="rowBtnOptions">⚙️</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor="let row of getPageData(); let i = index">\n <td *ngIf="showNumeration">{{i + getPageRowStart()}}</td>\n <td *ngFor="let key of getHeaders()">{{row[key.id]}}</td>\n <th *ngIf="rowBtnOptions">\n <div class="row" style="margin: auto;">\n <div *ngFor="let btnRow of rowBtnOptions"\n (click)="btnRow.action(row)"\n class="btn-row">\n <div *ngIf="btnRow.icon; then btnRowIcon; else btnRowTitle"></div>\n <ng-template #btnRowIcon>\n <i *ngIf="btnRow.icon.origin === \'bootstrap\'" [class]="btnRow.icon.icon"\n data-toggle="tooltip" data-placement="bottom" [title]="btnRow.title"></i>\n <img *ngIf="btnRow.icon.origin === \'img\'" [attr.src]="btnRow.icon.icon" class="img-icon"\n data-toggle="tooltip" data-placement="bottom" [title]="btnRow.title">\n </ng-template>\n <ng-template #btnRowTitle>\n <small>{{btnRow.title}}</small>\n </ng-template>\n </div>\n </div>\n </th>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class="row">\n <div class="col-sm-6">\n <div *ngIf="showSizeOptions"\n class="input-group input-group-sm mr-2 mb-2 select-page-size">\n <div class="input-group-prepend">\n <label class="input-group-text" for="">Renglones por página</label>\n </div>\n <select class="custom-select" (change)="changePageSize($event.target.value)">\n <option *ngFor="let option of pageSizeOptions"\n [value]="option"\n [selected]="option === pageSize? \'selected\': null">\n {{option}}\n </option>\n </select>\n </div>\n </div>\n <div class="col-sm-6">\n <nav *ngIf="showPaginator">\n <ul class="pagination pagination-sm justify-content-end">\n <li class="page-item">\n <span class="page-link paginator-label">\n {{getPageRowStart()}} - {{getPageRowEnd()}} de {{this.getDataSource().length}}\n </span>\n </li>\n <li class="page-item" [ngClass]="{\'disabled\': pageIndex === 1}">\n <a class="page-link" href="javascript:void(0);" (click)="goFirstPage()">\n <span aria-hidden="true">[«</span>\n </a>\n </li>\n <li class="page-item" [ngClass]="{\'disabled\': pageIndex === 1}">\n <a class="page-link" href="javascript:void(0);" (click)="goPreviousPage()">\n <span aria-hidden="true">«</span>\n </a>\n </li>\n <li class="page-item"><span class="page-link paginator-label">{{pageIndex}}</span></li>\n <li class="page-item" [ngClass]="{\'disabled\': pageIndex === getLastPage()}">\n <a class="page-link" href="javascript:void(0);" (click)="goNextPage()">\n <span aria-hidden="true">»</span>\n </a>\n </li>\n <li class="page-item" [ngClass]="{\'disabled\': pageIndex === getLastPage()}">\n <a class="page-link" href="javascript:void(0);" (click)="goLastPage()">\n <span aria-hidden="true">»]</span>\n </a>\n </li>\n </ul>\n </nav>\n </div>\n</div>',styles:[".select-page-size{width:250px}.paginator-label{background-color:#e9ecef!important;border:1px solid #ced4da!important}.page-link,.paginator-label{color:#495057!important}.img-icon{max-height:14px;max-width:14px}.btn-row>*{color:#535c68;cursor:pointer;margin-inline:4px}.btn-row>i{max-height:14px;max-width:14px}"]}]}],a.ctorParameters=function(){return[]},a.propDecorators={dataSource:[{type:e.Input}],headers:[{type:e.Input}],pageSize:[{type:e.Input}],pageSizeOptions:[{type:e.Input}],pageIndex:[{type:e.Input}],tableBtnOptions:[{type:e.Input}],rowBtnOptions:[{type:e.Input}],showNumeration:[{type:e.Input}],showSearcher:[{type:e.Input}],showSizeOptions:[{type:e.Input}],showPaginator:[{type:e.Input}]};var i=function(){};i.decorators=[{type:e.NgModule,args:[{declarations:[a],imports:[n.CommonModule],exports:[a]}]}],t.DatatableComponent=a,t.DatatableModule=i,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=bootstrangular-datatable.umd.min.js.map