import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: ` <h2>Pagination - Lazy Load</h2> <div style="margin-bottom:10px"> <label [for]="c1">Pager on: </label> <eui-combobox #c1 style="width:120px" [data]="pageOptions" [(ngModel)]="pagePosition" [editable]="false" [panelStyle]="{height:'auto'}"> </eui-combobox> </div> <eui-datagrid style="height:250px" [pagination]="true" [lazy]="true" [data]="data" [total]="total" [pageNumber]="pageNumber" [pageSize]="pageSize" [pagePosition]="pagePosition" [loading]="loading" (pageChange)="onPageChange($event)"> <eui-grid-column field="inv" title="Inv No"></eui-grid-column> <eui-grid-column field="name" title="Name"></eui-grid-column> <eui-grid-column field="amount" title="Amount" align="right"></eui-grid-column> <eui-grid-column field="price" title="Price" align="right"></eui-grid-column> <eui-grid-column field="cost" title="Cost" align="right"></eui-grid-column> <eui-grid-column field="note" title="Note"></eui-grid-column> </eui-datagrid> `, providers: [DataService] }) export class AppComponent { total: number = 0; pageNumber = 1; pageSize = 20; data = []; loading: boolean = false; pagePosition: string = 'bottom'; pageOptions = [{value:'bottom',text:'Bottom'},{value:'top',text:'Top'},{value:'both',text:'Both'}]; 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);