it-swarm.com.de

Wie füge ich eine Paginierung in Angular 4 für eine Tabelle hinzu?

Ich bin neu in Angular 4 und würde mich freuen, wenn mir jemand sagen könnte, wie ich die Seitenumbrüche in eine Tabelle einfügen kann ...

HTML:

<div *ngIf="tableDiv && adv1" id="adv1Div">
            <table class="table table-hover" id="adv1Table">
                <thead>
                    <tr class="black-muted-bg" >
                        <th class="align-right" *ngFor="let data of calendarTable[0].weeks">{{data.period}}</th>

                    </tr>
                </thead>
                <tbody>
                    <tr class="no-top-border" *ngFor="let item of calendarTable| paginate: { itemsPerPage: 9, currentPage: p };">
                        <td contenteditable='true' *ngFor="let data of item.weeks| paginate: { itemsPerPage: 9, currentPage: p };" class="align-right">{{data.price}}</td>   
                    </tr>
                </tbody>
                <a href="javascript:void(0)">
                    {{p}}
                  </a>

            </table>

        </div>         

Und mein JSON ist:

 public calendarTable = [
      { name: "TV AD1", 
          weeks: [
          { period: "2/10/2017", price: "400" },
          { period: "9/10/2017", price: "800" },
          { period: "16/10/2017", price: "200" },
          { period: "23/10/2017", price: "500" },
          { period: "30/10/2017", price: "600" },
          { period: "6/11/2017", price: "800" },
          { period: "13/11/2017", price: "700" },
          { period: "20/11/2017", price: "800" },
          { period: "27/11/2017", price: "900" },
          { period: "4/12/2017", price: "400" },
          { period: "11/12/2017", price: "800" },
          { period: "18/12/2017", price: "200" },
          { period: "25/12/2017", price: "500" },
          { period: "1/1/2018", price: "600" },
          { period: "8/1/2018", price: "800" },
          { period: "15/1/2018", price: "700" },
          { period: "22/1/2018", price: "800" },
          { period: "29/1/2018", price: "900" }
          ]

          }
   ]

Ich möchte 5 Elemente pro Seite in einer Tabelle hinzufügen. Bitte helfen Sie mir dabei.

6
Neha Uniyal

Eine einfache Lösung mit installierter ngx-pagination für Angular 4 finden Sie hier . Sie müssen ihn nur in Ihr ngModule importieren und den Seitenindex in Ihrer Komponente.ts als p: number = 1; deklarieren.

Suchen Sie Ihr Seitenelement unter Ihrem Tisch wie folgt: 

<pagination-controls (pageChange)="p = $event"></pagination-controls>

Deklarieren Sie die Nummer der Zeile, die in Ihrem * ngFor // angezeigt werden soll:

<tr *ngFor="let game of games | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">

Hoffe es hilft dir!

12
Mnemo

sie können ein Tutorial überprüfen hier

und du findest die Demo hier

Update: - Check hier

UPDATE 2: -
Das obige Tutorial hat tatsächlich diese Basislogik: -
1). Es werden maximal 10 Links angezeigt.
2). aktiv wie ist die 6. Position, wenn die aktive Seite über 5 oder unter 4 von der letzten Position liegt.

paginierungslogik (hinzugefügt als Dienst zur Wiederverwendung): -

import * as _ from 'underscore';

export class PagerService {
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
        // calculate total pages
        let totalPages = Math.ceil(totalItems / pageSize);

        let startPage: number, endPage: number;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        let startIndex = (currentPage - 1) * pageSize;
        let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to ng-repeat in the pager control
        let pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

Komponente, die den Paginierungsdienst verwendet: -

import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

import * as _ from 'underscore';

import { PagerService } from './_services/index'

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
    constructor(private http: Http, private pagerService: PagerService) { }

    // array of all items to be paged
    private allItems: any[];

    // pager object
    pager: any = {};

    // paged items
    pagedItems: any[];

    ngOnInit() {
        // get dummy data
        this.http.get('./dummy-data.json')
            .map((response: Response) => response.json())
            .subscribe(data => {
                // set items to json response
                this.allItems = data;

                // initialize to page 1
                this.setPage(1);
            });
    }

    setPage(page: number) {
        if (page < 1 || page > this.pager.totalPages) {
            return;
        }

        // get pager object from service
        this.pager = this.pagerService.getPager(this.allItems.length, page);

        // get current page of items
        this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
    }
}

Die HTML-Vorlage: -

<div>
    <div class="container">
        <div class="text-center">
            <h1>Angular 2 - Pagination Example with logic like Google</h1>

            <!-- items being paged -->
            <div *ngFor="let item of pagedItems">{{item.name}}</div>

            <!-- pager -->
            <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
                <li [ngClass]="{disabled:pager.currentPage === 1}">
                    <a (click)="setPage(1)">First</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === 1}">
                    <a (click)="setPage(pager.currentPage - 1)">Previous</a>
                </li>
                <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                    <a (click)="setPage(page)">{{page}}</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                    <a (click)="setPage(pager.currentPage + 1)">Next</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                    <a (click)="setPage(pager.totalPages)">Last</a>
                </li>
            </ul>
        </div>
    </div>
</div>

update 3: -
Ein einfacherer Ansatz ... obwohl ich eine einzige Schaltfläche mit Umschaltlogik bereitgestellt habe, die Sie mit mehreren Tasten ändern können

    @Component({
        selector: 'my-app',
        template:`
                    <div> 
                         <h5>TV ADS</h5>

                                <ul>
                                  <li *ngFor="let item of calendarTableSelected.weeks">
                                   <span>{{item.period}}</span>
                                  </li>
                                </ul> 
                    </div>
                    <div>
                        <button (click)="update()">change</button>
                    </div>
                 `
    })
    export class SomeComponent {
              public calendarTable = [
      { name: "TV AD1", 
          weeks: [
          { period: "2/10/2017", price: "400" },
          { period: "9/10/2017", price: "800" },
          { period: "16/10/2017", price: "200" },
          { period: "23/10/2017", price: "500" },
          { period: "30/10/2017", price: "600" },
          { period: "6/11/2017", price: "800" },
          { period: "13/11/2017", price: "700" },
          { period: "20/11/2017", price: "800" },
          { period: "27/11/2017", price: "900" },
          { period: "4/12/2017", price: "400" },
          { period: "11/12/2017", price: "800" },
          { period: "18/12/2017", price: "200" },
          { period: "25/12/2017", price: "500" },
          { period: "1/1/2018", price: "600" },
          { period: "8/1/2018", price: "800" },
          { period: "15/1/2018", price: "700" },
          { period: "22/1/2018", price: "800" },
          { period: "29/1/2018", price: "900" }
          ]
      },
      { name: "TV AD2", 
          weeks: [
            { period: "2/10/2017", price: "500" },
            { period: "9/10/2017", price: "600" },
            { period: "16/10/2017", price: "700" },
            { period: "23/10/2017", price: "800" },
            { period: "30/10/2017", price: "900" },
            { period: "6/10/2017", price: "100" },
            { period: "13/10/2017", price: "200" },
            { period: "20/10/2017", price: "300" },
            { period: "27/10/2017", price: "400" },
            { period: "4/12/2017", price: "400" },
            { period: "11/12/2017", price: "800" },
            { period: "18/12/2017", price: "200" },
            { period: "25/12/2017", price: "500" },
            { period: "1/1/2018", price: "600" },
            { period: "8/1/2018", price: "800" },
            { period: "15/1/2018", price: "700" },
            { period: "22/1/2018", price: "800" },
            { period: "29/1/2018", price: "900" }
            ]
          },

      { name: "TV AD3",
          weeks: [
            { period: "2/10/2017", price: "500" },
            { period: "9/10/2017", price: "600" },
            { period: "16/10/2017", price: "700" },
            { period: "23/10/2017", price: "800" },
            { period: "30/10/2017", price: "900" },
            { period: "6/10/2017", price: "100" },
            { period: "13/10/2017", price: "200" },
            { period: "20/10/2017", price: "300" },
            { period: "27/10/2017", price: "400" },
            { period: "4/12/2017", price: "400" },
            { period: "11/12/2017", price: "800" },
            { period: "18/12/2017", price: "200" },
            { period: "25/12/2017", price: "500" },
            { period: "1/1/2018", price: "600" },
            { period: "8/1/2018", price: "800" },
            { period: "15/1/2018", price: "700" },
            { period: "22/1/2018", price: "800" },
            { period: "29/1/2018", price: "900" }
            ]
          },

      { name: "TV AD4",
        weeks: [
          { period: "2/10/2017", price: "500" },
          { period: "9/10/2017", price: "600" },
          { period: "16/10/2017", price: "700" },
          { period: "23/10/2017", price: "800" },
          { period: "30/10/2017", price: "900" },
          { period: "6/10/2017", price: "100" },
          { period: "13/10/2017", price: "200" },
          { period: "20/10/2017", price: "300" },
          { period: "27/10/2017", price: "400" },
          { period: "4/12/2017", price: "400" },
          { period: "11/12/2017", price: "800" },
          { period: "18/12/2017", price: "200" },
          { period: "25/12/2017", price: "500" },
          { period: "1/1/2018", price: "600" },
          { period: "8/1/2018", price: "800" },
          { period: "15/1/2018", price: "700" },
          { period: "22/1/2018", price: "800" },
          { period: "29/1/2018", price: "900" }
            ]
          }
   ]
        calendarTableSelected: Array;
        i: number= 0;
        constructor() {
            this.calendarTableSelected = this.calendarTable[0];
        }
        update(){
            if(this.i == 0){this.i = 1;}else{this.i = 0}// change this acc. to your needed logic or use any of the above provided links to form your logic
            this.calendarTableSelected = this.calendarTable[this.i];
        }

    }

PLUNKR wie gewünscht.

2
Himanshu Bansal

Sie können Angular DataTable verwenden, wenn Sie möchten.

Zur Dokumentation: 

https://www.npmjs.com/package/angular2-datatable

1
Amit