<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>ng-bootstrap demo</title>
<link rel="stylesheet" href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
},
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule, HttpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdPaginationConfig } from './pagination-config';
@Component({
selector: 'my-app',
template: `
<div class="container-fluid">
<hr>
<p>
This is a demo plnkr forked from the <strong>ng-bootstrap</strong> project: Angular 2 powered Bootstrap.
Visit <a href="https://ng-bootstrap.github.io/" target="_blank">https://ng-bootstrap.github.io</a> for more widgets and demos.
</p>
<hr>
<ngbd-pagination-config></ngbd-pagination-config>
</div>
`
})
export class App {
}
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, JsonpModule, NgbModule.forRoot(), HttpModule],
declarations: [App, NgbdPaginationConfig],
bootstrap: [App]
})
export class AppModule {}
import {Component, OnInit} from '@angular/core';
import {Http, Response, RequestOptions, Headers, URLSearchParams} from "@angular/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map'
import {NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-pagination-config',
templateUrl: 'src/pagination-config.html',
providers: [NgbPaginationConfig] // add NgbPaginationConfig to the component providers
})
export class NgbdPaginationConfig implements OnInit {
public currentPage: number;
public numPages: number;
public totalItems: number = 0;
public itemsPerPage: number;
constructor(private http: Http) {
// customize default values of paginations used by this component tree
}
ngOnInit(): void {
console.dir(this.http);
this.itemsPerPage = 5;
console.log("ngOnInit: ");
this.getActorsList();
this.currentPage = 1;
}
getActorsList(): void{
console.log("getActorsList():");
this.getActorsListHttp(this.currentPage, this.itemsPerPage)
.subscribe(actorList => {
this.actors = actorList.Actors;
this.totalItems = actorList.Total;
});
}
public pageChanged(page){
console.log("pageChanged: ", page);
this.getActorsList();
}
getActorsListHttp(currentPage, itemsPerPage): Observable<ActorList>{
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({
'headers': headers
});
return this.http.get('actors.json', options)
.map((response: Response) => response.json());
}
}
export class Actor {
public Id: number;
public PersonId: number;
public UserId: number;
public FirstName: string;
public LastName: string;
public Patronymic: string;
public Alias: string;
public Gender: string = "";
public AvatarUrl: string;
public ActorAvatarUrl: string;
public Birthday: string;
public Age: number;
public CreatedAt: string;
public UpdatedAt: string;
public CurrentRate: number;
public VideoTotal: number;
public PhotoTotal: number;
public Prof: string = "";
public CountryId: number = 0;
}
export class ActorList {
Actors: Actor[];
Total: number;
}
<p>This pagination uses custom default values</p>
<pre>Вы на странице {{currentPage}} / {{pagination.pageCount}} всего элементов: {{totalItems}}</pre>
<ngb-pagination #pagination [pageSize]="itemsPerPage" [collectionSize]="totalItems" [(page)]="currentPage" (maxSize)="5" [boundaryLinks]="true" (pageChange)="pageChanged($event)"></ngb-pagination>
{"Actors":[{"Id":1,"PersonId":0,"Alias":"","ActorAvatarUrl":"","CreatedAt":"2016-08-11T22:28:40+03:00","UpdatedAt":"2016-08-12T00:25:01+03:00","VideoTotal":0,"PhotoTotal":0,"UserId":0,"LastName":"Бондарчук","FirstName":"Федор","Patronymic":"Сергеевич","Birthday":"1967-05-09T00:00:00+03:00","Gender":"male","AvatarUrl":"/img/actor/1/4aedc48e-4379-4f41-aefa-28e64a160652.png"},{"Id":2,"PersonId":0,"Alias":"","ActorAvatarUrl":"","CreatedAt":"2016-08-12T00:24:31+03:00","UpdatedAt":"2016-08-12T00:24:31+03:00","VideoTotal":0,"PhotoTotal":0,"UserId":0,"LastName":"Меньшов","FirstName":"Владимир","Patronymic":"Валентинович","Birthday":"1939-09-17T00:00:00+03:00","Gender":"male","AvatarUrl":"/img/actor/2/4ef89444-34d7-46d0-99f9-d0a666e188e0.png"},{"Id":3,"PersonId":0,"Alias":"fdgfdgf","ActorAvatarUrl":"","CreatedAt":"2016-10-11T18:02:05+03:00","UpdatedAt":"2016-10-11T18:02:05+03:00","VideoTotal":0,"PhotoTotal":0,"UserId":0,"LastName":"dgdg","FirstName":"dgdgdf","Patronymic":"dgfdgfg","Birthday":"2016-09-28T00:00:00+03:00","Gender":"male","AvatarUrl":"/img/actor/3/0fce612e-9ce6-4fa4-99a0-177f47672132.png"},{"Id":4,"PersonId":0,"Alias":"Иванушка","ActorAvatarUrl":"","CreatedAt":"2016-10-12T00:16:10+03:00","UpdatedAt":"2016-10-12T00:16:10+03:00","VideoTotal":0,"PhotoTotal":0,"UserId":0,"LastName":"Иванов","FirstName":"Иван","Patronymic":"Иванович","Birthday":"2010-02-02T00:00:00+03:00","Gender":"male","AvatarUrl":"/img/actor/4/1e7c0bb6-bd24-406b-a754-77a118a15552.png"},{"Id":5,"PersonId":0,"Alias":"Петя","ActorAvatarUrl":"","CreatedAt":"2016-10-12T03:23:29+03:00","UpdatedAt":"2016-10-12T03:23:29+03:00","VideoTotal":0,"PhotoTotal":0,"UserId":0,"LastName":"Петров","FirstName":"Петр","Patronymic":"Петрович","Birthday":"2013-10-01T00:00:00+03:00","Gender":"male","AvatarUrl":"/img/actor/5/cc4c18b0-0883-4c58-8d4c-c7f1eb57c7aa.png"}],"Total":6}