larang-paginator
Version:
This is a Laravel Angular Paginator for tables. For other backend language to use this library. Please make sure your success response conforms with this response:
3 lines (2 loc) • 7.36 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("rxjs/Subject"),require("rxjs/Observable"),require("rxjs/add/observable/from"),require("@angular/common/http")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","rxjs/Subject","rxjs/Observable","rxjs/add/observable/from","@angular/common/http"],t):t(e["larang-paginator"]={},e.ng.core,e.ng.common,e.Rx,e.Rx,e.Rx.Observable,e.ng.common.http)}(this,function(e,t,n,a,i,r,o){"use strict";var s=function(){function e(){var r=this;this.listeners={},this.eventsSubject=new a.Subject,this.events=i.Observable.from(this.eventsSubject),this.events.subscribe(function(e){var t=e.name,n=e.args;if(r.listeners[t])for(var a=0,i=r.listeners[t];a<i.length;a++){i[a].apply(void 0,n)}})}return e.prototype.on=function(e,t){this.listeners[e]||(this.listeners[e]=[],this.listeners[e].push(t)),this.listeners[e]&&(this.listeners[e][0]=t)},e.prototype.broadcast=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];this.eventsSubject.next({name:e,args:t})},e}();s.decorators=[{type:t.Injectable}],s.ctorParameters=function(){return[]};var p=function(){function e(e){this.http=e}return e.prototype.listByPaginator=function(e){return this.http.get(e)},e}();p.decorators=[{type:t.Injectable}],p.ctorParameters=function(){return[{type:o.HttpClient}]};var l=function(){function e(e,t){var n=this;this.paginatorService=e,this.eventsService=t,this.path="",this.limit=50,this.from="",this.perNav=5,this.viewPage="page",this.paginate="paginate",this.next_page="",this.prev_page="",this.showLoad=0,this.totalPages=[],this.pages=[],this.eventsService.on("getUrlPath",function(e){n.path=e})}return e.prototype.getPages=function(){for(var e=1;e<=this.data.last_page;e++)this.totalPages.push(e);this.getPaging()},e.prototype.getPaging=function(){this.perNav+=this.pages.length,this.pages=this.totalPages.slice(0,this.perNav)},e.prototype.loadData=function(e,t){var n=this,a="";a=-1===this.path.indexOf("?")?this.path+"?"+e:this.path+"&"+e,this.showLoad="string"==typeof t?parseInt(t.substr(t.indexOf("=")+1),10):t,this.paginatorService.listByPaginator(a).subscribe(function(e){n.showLoad>n.pages.length&&n.getPaging(),n.data=e.last_page?e:e.data||e.content||e.contents||e.resource||e.resources||e.list||e.items,n.nextPrevPage(),n.eventsService.broadcast(n.from,e),n.showLoad=0},function(e){n.showLoad=0})},e.prototype.nextPrevPage=function(){var e=this.viewPage.trim()+"=";if(0===Object.keys(this.data).length)return null;if(this.data.next_page_url){var t=this.data.next_page_url.indexOf(e);this.next_page=this.data.next_page_url.substr(t).trim()}if(this.data.prev_page_url){var n=this.data.prev_page_url.indexOf(e);this.prev_page=this.data.prev_page_url.substr(n).trim()}},e.prototype.ngOnInit=function(){this.nextPrevPage(),this.getPages()},e.prototype.ngAfterViewInit=function(){},e}();l.decorators=[{type:t.Component,args:[{selector:"app-paginator",template:'\n <nav aria-label="..." *ngIf="pages.length !== 0">\n <ul class="pagination justify-content-center">\n <li class="page-item" [class.disabled]="data[\'prev_page_url\'] === null" >\n <a class="page-link" (click)="loadData((prev_page + \'&\' + paginate + \'=\' + limit), prev_page)" role="button" tabindex="-1">Previous</a>\n </li>\n <li [class.hide]="pages.length === 0" [class.show]="pages.length > 0" *ngFor="let page of pages" id="page_{{page}}" [class.active]="data[\'current_page\'] === page" class="animated fadeInRight page-item">\n <a class="page-link" (click)="loadData((viewPage + \'=\' + page + \'&\' + paginate + \'=\' + limit), page)" role="button">\n <i *ngIf="page === showLoad" class="fa fa-spin fa-spinner"></i> {{page}}\n </a>\n </li>\n <li *ngIf="totalPages.length > perNav">\n <a (click)="getPaging()" title="Load More Navigation" role="button" class="page-link">...</a>\n </li>\n <li *ngIf="pages.length === 0">\n <a role="button" class="page-link"><i class="fa fa-spin fa-spinner"></i></a>\n </li>\n <li class="page-item" [class.disabled]="data[\'next_page_url\'] === null" >\n <a class="page-link" (click)="loadData((next_page + \'&\' + paginate + \'=\' + limit), next_page)" role="button">Next</a>\n </li>\n </ul>\n </nav>\n ',styles:["\n\n .pagination {\n display: -ms-flexbox;\n display: -webkit-box;\n display: flex;\n padding-left: 0;\n list-style: none;\n border-radius: 0.25rem;\n }\n\n .page-item:first-child .page-link {\n margin-left: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n }\n\n .page-item:last-child .page-link {\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n }\n\n .page-item.active .page-link {\n z-index: 2;\n color: #fff;\n background-color: #007bff;\n border-color: #007bff;\n }\n\n .page-item.disabled .page-link {\n color: #868e96;\n pointer-events: none;\n background-color: #fff;\n border-color: #ddd;\n }\n\n .page-link {\n position: relative;\n display: block;\n padding: 0.5rem 0.75rem;\n margin-left: -1px;\n line-height: 1.25;\n color: #007bff;\n background-color: #fff;\n border: 1px solid #ddd;\n cursor: pointer;\n }\n\n .page-link:focus, .page-link:hover {\n color: #0056b3;\n text-decoration: none;\n background-color: #e9ecef;\n border-color: #ddd;\n }\n\n .pagination-lg .page-link {\n padding: 0.75rem 1.5rem;\n font-size: 1.25rem;\n line-height: 1.5;\n }\n\n .pagination-lg .page-item:first-child .page-link {\n border-top-left-radius: 0.3rem;\n border-bottom-left-radius: 0.3rem;\n }\n\n .pagination-lg .page-item:last-child .page-link {\n border-top-right-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n }\n\n .pagination-sm .page-link {\n padding: 0.25rem 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5;\n }\n\n .pagination-sm .page-item:first-child .page-link {\n border-top-left-radius: 0.2rem;\n border-bottom-left-radius: 0.2rem;\n }\n\n .pagination-sm .page-item:last-child .page-link {\n border-top-right-radius: 0.2rem;\n border-bottom-right-radius: 0.2rem;\n }\n\n .justify-content-center {\n -ms-flex-pack: center !important;\n -webkit-box-pack: center !important;\n justify-content: center !important;\n }\n "]}]}],l.ctorParameters=function(){return[{type:p},{type:s}]},l.propDecorators={data:[{type:t.Input}],path:[{type:t.Input}],limit:[{type:t.Input}],from:[{type:t.Input}],perNav:[{type:t.Input}],viewPage:[{type:t.Input}],paginate:[{type:t.Input}]};var g=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[p,s]}},e}();g.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.HttpClientModule],declarations:[l],exports:[l]}]}],g.ctorParameters=function(){return[]},e.LarangPaginatorModule=g,e.EventsService=s,e.PaginatorService=p,e.ɵa=l,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=larang-paginator.umd.min.js.map