0

Procurei muito no Google mas não tive um caminho claro de como fazer uma datatable ( uso angular 2 ) que contenha paginação pelo servidor, ou seka, que a cada página ele fizesse uma requisição individual da mesma.

Todas que vi, faz a requisição php com o back-end, mas traz todos os registros em JSON de uma vez, ou seja, se houver 100.000 linhas ele pega todas elas.

Gostaria de desenvolver uma table que a cada página ( de 30 registros ) fizesse uma requisição para pegar o JSON dos próximos registros. A parte do back-end é tranquilo, preciso somente de um caminho pra fazer essa páginação no angular, como pedir cada requisição. Creio que primeiro terei que pegar um total de linhas e fazer a divisão de páginas, depois a casa página fazer uma req http tipo: empresas/2(page)/30 (registros) para retornar os registros daquele intervalo.

Ja fiz isso com o laravel (php) através da paginação nativa dele com bootstrap, mas agora estou fazendo o front-end pelo angular 2 e terei que mudar.

Atualização:

conforme a foto, ex do meu back-end: back-end

Meu Service para pegar http:(ele funciona no console.log(), mas não estou conseguindo passar a resposta pra uma variável pra depois mandar pra view. Estou me aventurando agora em Angular, principalmente typescript, estou vendo várias video-aulas e tals mas ta complicado, minha área é PHP.

Service.ts

import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import {Observable} from 'rxjs/Rx'; //import {Empresa} from '../models/empresas';

// Import RxJs required methods import 'rxjs/add/operator/map'; //import 'rxjs/add/operator/catch';

@Injectable() export class EmpresasCrudService { //private commentsUrl = 'http://localhost:8000/api/empresas';

constructor(private _http: Http) { }

_endpoint_url: string = 'http://localhost/16-11/Sysferaser5.3/public/data/4';
getEmpresas(page:number) { return this._http.get(this._endpoint_url + "?page=" + page) .map(response => response.json()); }

}

empresas-index.component.ts:

import { Component, OnInit } from '@angular/core';

import { EmpresasCrudService } from './services/empresas-crud.service'; import { Http, Response, Headers, RequestOptions } from '@angular/http';

@Component({ selector: 'empresas-index', templateUrl: 'app/cadastros/empresas/empresas-index.component.html' }) export class EmpresasIndexComponent implements OnInit{

constructor(private dataService: EmpresasCrudService) {

this._service = dataService;   }
public _service;
public _data;
public _total;
public _page;

getEmps(page: number){

    this._service.getEmpresas(page)
        .subscribe(
        people => {this._data = people.data, this._total = people.total},
        error => console.error('Error: ' + error),
        () => console.log('Completed!')
    );
    this._page = page;
}

ngOnInit(){
  this.getEmps(1);

}

}

empresa-index.component.html

<div class="panel panel-default">
<div class="panel-heading">
    <h3 class="panel-title">
        Panel title
    </h3>
</div>
<div class="panel-body">
    Total: {{ _total }} <br>
    Página: {{ _page }}
    <ul>
  <li *ngFor="let item of _data">{{item.empresa_id}}</li>
</ul><br><br>
</div>
<div class="panel-footer">
    Panel footer
</div>

1

1 Resposta 1

2

Semana passada eu estive fazendo alguns estudos, e criei um projeto Rails 5 API JSON com umas 100 linhas, e mandei paginar de 10 em 10.

Depois, fiz um projeto em Angular 2 para ler estas linhas, e pegar os dados e paginar.

Se o que entendi que você quer fazer é o mesmo que eu fiz, este módulo irá facilitar seu trabalho

https://github.com/michaelbromley/ng2-pagination

No seu Component, crie um método para puxar a quantidade de linhas da API via Service

  getPage(page: number) {
    this._data = this.postService.getPosts(page)
      .do((res: any) => {
        this._total = res.json().total;
        this._page = page;
      })
      .map((res: any) => res.json().data);
  }

  ngOnInit() {
    this.getPage(1);
  }

O meu service contém apenas um método buscando os dados da URL da API

  _endpoint_url: string = 'http://192.168.2.3:3030/api/v1/posts';
  getPosts(page) {
    return this._http.get(this._endpoint_url + "?page=" + page)
  }

Lembrando que sua API deverá conter uma propriedade passando o TOTAL de registros que contém. inserir a descrição da imagem aqui

Meu exemplo está feio e mal escrito porque trata-se apenas de testes, estudos, que faço em minha máquina local para aprender, visto que estou desempregado, mas, parar de aprender, jamais :-) !

7
  • Beleza amigo, assim que testar aviso aqui 11/11/2016 às 14:26
  • Realmente é isso que preciso, mas estou com dificuldades ainda... 16/11/2016 às 17:03
  • Atualzei a foto do back-end, criei um serviço que faz a requisição ajax... mas não estou conseguindo entender pra implementar no empresas-index.component -> para mostrar a table 16/11/2016 às 17:07
  • Compartilhe seu também seu component.ts .html e seu service para verificarmos como você está implementando. Aparentemente seu endPoint está correto, mostrando o total de linhas.
    – duardbr
    16/11/2016 às 17:36
  • Depois de tanto pesquisar, deu tudo certo, resolvido a questão, obrigado pela atenção 17/11/2016 às 1:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .