primeng_datatable_querystring.js

import { Component, OnInit, ViewChild } from '@angular/core';
import { LazyLoadEvent, DataTable } from 'primeng/primeng';
import { Router, ActivatedRoute } from '@angular/router';

// component
declare var jQuery: any;

params = {page: 1, page_size: 10};

paginator = {total_records: 0, per_page: 10, total_pages: 0, current_page: 1};

data = MyModel[];

/* access primeng-datatable child component */
@ViewChild('dt') dataTable: DataTable;

constructor(
	private router: Router,
	private route: ActivatedRoute,
	) {}

ngOnInit() {
  // observe changes in URL then assign to class vars
  this.route.queryParams.subscribe(params => {
    if ('page_size' in params && +params['page_size'] > 0) {
      this.paginator.per_page = Math.trunc(params['per_page'])
    }
    
    if ('page' in params && params['page_size'] > 0) {
      this.paginator.current_page = Math.trunc(params['page']);
    }
  });
  
  // load initial data
  this.getResource();
}

setParams() {
  this.params.currentPage = this.paginator.current_page;
  this.params.perPage = this.paginator.per_page;
}

// fetch our response data, fired on init. subsequent requests will now fire this.paginate()
getResource() {
  this.myService.myMethod.subscribe(response => {
    this.data = response.data // this will depend on your API response. in this example, .data is the dataset
    
    // ff. data is assuming API has response of per_page, total_records and total_pages
    this.paginator.total_records = jobs.data.total_records;
    this.paginator.per_page = jobs.data.per_page;
    this.paginator.total_pages = jobs.data.total_pages;
    
    // validate current page
    this.paginator.current_page = (this.paginator.current_page > this.paginator.total_pages) ?
							1 : this.paginator.current_page;
    
    // set current page on initial data load
    this.setCurrentPage(this.paginator.current_page, this.paginator.per_page);
  });
}

// handle event when user clicks on a page link
paginate(event: LazyLoadEvent) {
  // get current page on paginator pages link click
  this.paginator.current_page = +$('.ui-paginator-page.ui-state-active').text();
  
  // get perPage on paginator per page select
  this.paginator.per_page = event.rows;
  
  this.setParams();
  
  // change URL on address bar
  this.router.navigate('[my-route]', {queryParams: this.params});
  
  this.myService.myMethod(this.paginator.per_page, this.paginator.current_page).subscribe(response => {
    // this will depend on your API response. in this example, .data is the dataset
    this.data = response.data; 
    
    // ff. data is assuming API has response of per_page, total_records
    this.paginator.total_records = data.total_records;
    this.paginator.per_page = data.per_page;
  });
}

// set current page when data is initially loaded
setCurrentPage(page: number, rows: number) {
  this.dataTable.paginate({first: ((page - 1) * this.dataTable.rows), rows: rows});
}
                                    
// my-service.ts
myMethod(per_page, current_page) {
  let params = jQuery.param{
    page : page,
    page_size : pageSize,
  };
    
  let url = `${this.conf.apiUrl}/jobs/get?${params}`;
    
  return this.http
    .get(url)
    .map((response: Response) => response.json());
}
  
// template:
<p-dataTable #dt [lazy]="true" 
    (onPage)="paginate($event)"
    (toggle)="switchCompany($event)"
    [value]="data" 
    [rows]="10" 
    [totalRecords]="paginator.total_records"
    [rows]="paginator.per_page"
    [paginator]="true" 
    [pageLinks]="5" 
    [rowsPerPageOptions]="[10,20,50,100]">
    ...
</p-dataTable>