import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: ` <h2>DataList Pagination - Lazy Load</h2> <eui-datalist style="width:600px;height:250px" [data]="data" [total]="total" [pagination]="true" [lazy]="true" [loading]="loading" [pageNumber]="pageNumber" [pageSize]="pageSize" [(selection)]="selection" idField="inv" selectionMode="single" (pageChange)="onPageChange($event)"> <ng-template euiItemTemplate let-row let-rowIndex="rowIndex"> <div class="product"> <div class="num">{{rowIndex+1}}</div> <div class="detail"> <p>{{row.inv}} - {{row.name}}</p> <p>Amount: {{row.amount}}</p> <p>Price: {{row.price}}</p> </div> </div> </ng-template> </eui-datalist> <p *ngIf="selection">You selected: {{selection.name}}</p> `, styles: [` .product{ display: flex; align-items: center; padding: 5px 0; border-bottom: 1px solid #eee; } .product .num{ width: 40px; height: 40px; background: #b8eecf; border-radius: 20px; text-align: center; line-height: 40px; margin: 0 10px; } .product img{ height: 100px; padding: 10px; } .product p{ margin: 0; padding: 2px 0; } `], providers: [DataService] }) export class AppComponent { total: number = 0; pageNumber = 1; pageSize = 20; data = []; loading: boolean = false; constructor(public dataService: DataService){} ngAfterViewInit() { this.loadPage(this.pageNumber, this.pageSize); } onPageChange(event){ this.loadPage(event.pageNumber, event.pageSize); } loadPage(pageNumber: number, pageSize: number) { this.loading = true; this.dataService.getData(pageNumber, pageSize).subscribe((data) => { this.total = data.total; this.pageNumber = data.pageNumber; this.data = data.rows; this.loading = false; }); } }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/delay'; @Injectable() export class DataService { getData(pageNumber: number, pageSize: number) { let total = 100000; let data = []; let start = (pageNumber - 1) * pageSize; for(let i=start+1; i<=start + pageSize; i++){ let amount = Math.floor(Math.random()*1000); let price = Math.floor(Math.random()*1000); data.push({ inv: 'Inv No '+i, name: 'Name '+i, amount: amount, price: price, cost: amount*price, note: 'Note '+i }); } return Observable.of({ total: total, pageNumber: pageNumber, pageSize: pageSize, rows: data }).delay(1000); } }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);