Datatable with pagination server side

Question

I searched a lot on Google but I did not have a clear path of how to make a datatable ( angular use 2 ) that contains pagination by the server, or seka, that each page he made an individual request of the same.

All I saw, makes the php request with the back-end, but brings all records in JSON at once, IE, if there are 100,000 lines it takes all of them.

I would like to develop a table that on each page ( of 30 records ) makes a request to get the JSON of the next records. The back-end part is quiet, I only need one way to do this page at the angle, how to request each request. I believe that first I will have to take a total of lines and do the division of pages, then the home page do a req http type: companies/2(page)/30 (records) to return the records of that interval.

I’ve done this with Laravel (php) through his native paging with bootstrap, but now I’m doing the front end at angular 2 and I’ll have to change.

Updating:

as the photo, ex my back-end:

My Service to get http:(it works on the.log() console, but I’m unable to pass the answer to a variable and then send it to view. I’m adventuring now in Angular, mainly typescript, I’m seeing several video-lessons and tals but complicated, my area is PHP.

Service.ts

import { Injectable } from '@angular/core'; import { Http, Response, Headers, Requestoptions } from '@angular/http'; import {Observable} from 'rxjs/Rx'; //import {Company} from '.. /models/companies';

// Import Rxjs required methods import 'rxjs/add/Operator/map'; //import 'rxjs/add/Operator/catch';

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

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(Sponse => Sponse.json()); }

}

companies-index.component.ts:

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

import { Empresascrudservice } from '. /services/crud.service'; import { Http, Response, Headers, Requestoptions } from '@angular/http';

@Component(? selector: 'enterprises-index', templateUrl: 'app/registrations/companies/companies-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);

}

}

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

Answer 1

Last week I was doing some studies, and I created a Rails 5 API JSON project with about 100 lines, and I sent 10 out of 10 pages.

Then I did a project in Angular 2 to read these lines, and take the data and paginate.

If what I understand you want to do is the same I did, this module will facilitate your work

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

In your Component, create a method to pull the number of lines from the 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);
  }

My service contains only one method searching the API URL data

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

Remembering that your API should contain a property passing the TOTAL of records it contains.

My example is ugly and poorly written because it is just tests, studies, I do in my local machine to learn, since I am unemployed, but, stop learning, never :-) !