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:
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>