Datatable with pagination server side

Question

Datatable with pagination server side

Navigation

#1 by (1 votes)

-1

I searched a lot in Google but did not have a clear path of how to make a datatable that contains pagination by the server, or seka, that on each page it made an individual request of it.

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

I would like to develop a table that each page (30 records) would make a request to get the JSON of the next records. The back end part is quiet, I only need one way to make this page in the corner, how to ask for each request. I believe that first I will have to get a total of rows and do the page splitting, then the home page make a req http: companies / 2 (page) / 30 (records) to return records from that range.

I've done this with laravel (php) through the native pagination of it with bootstrap, but now I'm doing the front end through angular 2 and I'll have to change.

Update:

According to the photo, ex from my backend:

MyServicetogethttp:(itworksinconsole.log(),butI'mnotabletopasstheresponsetoavariableandthensendittoview.IamnowventuringintoAngular,mainlytypescript,Iamseeingseveralvideo-lessonsandtalsbutitiscomplicated,myareaisPHP.

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';

//ImportRxJsrequiredmethodsimport'rxjs/add/operator/map';  //import'rxjs/add/operator/catch';

@Injectable()exportclassBusinessCrudService{        //privatecommentsUrl=' link ';

constructor (private _http: Http) {}

_endpoint_url: string =   ' link ';
  getEmpresas (page: number) {       return this._http.get (this._endpoint_url + "? page=" + page)         .map (response => response.json ()); }

}

companies-index.component.ts:

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

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

@Component ({selector: 'business-index', templateUrl:   'app / files / companies / companies-index.component.html'}) export class   EnterpriseIndexComponent 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);

}
}

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

laravel-5 angular jquery-datatables datatable

asked by anonymous 08.11.2016 / 20:28

1 answer

Setting the clock in a TD Remote changes in the branch do not come to the site [closed]

score 1 · Accepted Answer

Last week I've been doing some research, and I've created a Rails 5 API JSON project with about 100 lines, and I've sent out a 10-page page.

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

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

link

In your Component, create a method to pull the number of API lines 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 fetching the URL data from the API

  _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's just tests, studies, I do on my local machine to learn, since I'm unemployed, but, stop learning, never :-)!