Создание нумерации страниц на стороне сервера с помощью ng2-smart-table в angular 6 - PullRequest
Новая
       24

Создание нумерации страниц на стороне сервера с помощью ng2-smart-table в angular 6

0 голосов
/ 05 июля 2018

Я пытаюсь использовать компонент ng2-smart-table . Я действительно это сделал, но мне нужно обновить данные после того, как пользователь щелкнет страницу или столбец для сортировки, есть ли способ захватить эти события и обновить данные?

table.component.html 

 <ng2-smart-table 
 [settings]="settings" 
 [source]="characters">
 </ng2-smart-table>

table.service.ts 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class TableService {
  constructor(private http: HttpClient) { }
  url = 'http://localhost:4000';
  getCharacters() {
    return this
            .http
            .get(`${this.url}/characters`);
        }
}

table.interface.ts 

export interface Table {
ticket: String;
title: String;
state: String;
owner: String;
age: String;
priority: String;
}

table.component.ts 

  import { Component, OnInit } from '@angular/core';
  import { TableService } from './table.service';
  import { Table } from './table.interface';
  import { Observable } from 'rxjs';

  @Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.scss']
  })
  export class TableComponent implements OnInit {

    characters: Table[];
        settings = {
          columns: {
            ticket: {
              title: 'Ticket',
              filter: false
            },
            title: {
              title: 'Title',
              filter: false
            },
            state: {
              title: 'State',
              filter: false
            },
            owner:{
              title: 'Owner',
              filter: false
            },
            age:{
              title: 'Age',
              filter: false
            },
            priority:{
              title: 'Priority',
              filter: false
            }
          },
          actions:{
            columnTitle: '',
            add: false,
            edit: false,
            delete: false
          }
    };    

        constructor(private tservice: TableService) { }

      ngOnInit() {
        this
          .tservice
          .getCharacters()
          .subscribe((data: Table[]) => {
            this.characters = data;
        });
      }
    }

parent.component.ts 

import { Component, OnInit } from '@angular/core';
import { TableComponent } from '../../utils/table/table.component';

@Component({
  selector: 'app-ticket-item-list',
  templateUrl: './ticket-item-list.component.html',
  styleUrls: ['./ticket-item-list.component.scss']
})
export class TicketItemListComponent implements OnInit {

  pagination = {
    TotalItems: 100,
    CurrentPage: 1,
    PageSize: 10,
    TotalPageLinkButtons: 5,
    RowsPerPageOptions: [10, 20, 30, 50, 100]
  };

  /* Paging Component metod */
  myChanges(event) {
    this.pagination.CurrentPage = event.currentPage;
    this.pagination.TotalItems = event.totalItems;
    this.pagination.PageSize = event.pageSize;
    this.pagination.TotalPageLinkButtons = event.totalPageLinkButtons;
  }

  constructor() { }

  ngOnInit() {
  }

}

parent.component.html 

<app-table></app-table>

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Для нумерации страниц используйте setPaging как 

this.YourlocalDataSource.setPaging(1, 10, true);

1 это страница, 10 - количество строк на странице, true заставляет отрисовать страницу

0 голосов
/ 05 июля 2018

Вы можете использовать ng2-smart-table LocalDataSource для фильтрации, установки фильтров, добавления фильтров и т. Д. Таким образом, вы можете сохранить результат службы в объекте LocalDataSource. В вашем init что-то вроде: this.characters = new LocalDataSource (tableService.getCharacters ());

Вот источник для справки: https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/lib/data-source/local/local.data-source.ts

...