Angular 6 DataTables - how to get current page

Question

I'm creating an Angular 6 app with Angular datatables (https://l-lin.github.io/angular-datatables/#/welcome). This is my component code:

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-mainmenu',
  templateUrl: './mainmenu.component.html',
  styleUrls: ['./mainmenu.component.css']
})

export class MainmenuComponent implements OnInit {
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  learningPaths: LearningPath[];

  constructor(private http: HttpClient) { }

   ngOnInit(): void {
    const that = this;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponse>(
            'http://localhost:4154/api/LP?p=1'
            ,
            dataTablesParameters, {}
          ).subscribe(resp => {
            that.learningPaths = resp.data;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'icon', orderable: false }, { data: 'name' }, { data: 'description' }],
      order: [[ 1, "asc" ]]
    };
  }
}

I want to be able to pass current page index to the server side api. Can anyone point me into right direction? I'm able to display current page index like this:

{{ (datatableElement.dtInstance | async)?.table().page.info().page }}

but I have no idea how to access page info before the ajax call is being made.

May be this can help but this is in AngularJS: https://stackoverflow.com/questions/39161117/angular-datatable-get-current-page-total-page — Aayushi Jain, Jun 15 '18 at 02:24
Also try passing `$event` in the method when you click on the page button (example page no. 2) and tell us what you have got in that. — Aayushi Jain, Jun 15 '18 at 02:31
why do you need currentpage? there are two parameters in `dataTablesParameters`, ie `start` and `length`. If you want items of a perticular page(ie you click a pagenumber), on the backend, filter the queryset something like `queryset[start:start + length]` will do the job. — suhailvs, Aug 30 '18 at 09:27
hey @Antoniossss can you please elaborate it more as i am using dataTable and want all the functionality of it i am using it in angular 6 — Jayant Singh, Sep 09 '18 at 14:24
i am getting this error if i used `` `[ts] Cannot find name 'DataTablesResponse'. [ts] Expected 0 type arguments, but got 1.` — Jayant Singh, Sep 09 '18 at 14:34

score 2 · Answer 1 · answered May 08 '19 at 13:07

you can get page no by using ajax parameters, look at the below code you will get an idea.

ajax: (dataTablesParameters: any, callback) => {
    const page = parseInt(dataTablesParameters.start) / parseInt(dataTablesParameters.length) + 1;
    const rowData = {
      no_of_records: dataTablesParameters.length,
      page: page,
      group_id: 1
    };
    that.http
      .post<DataTablesResponse>(
        'http://localhost:3030/role/list',
        rowData, {}
      ).subscribe(resp => {
        console.log(resp);
        that.persons = resp.data;

        callback({
          recordsTotal: 10,
          recordsFiltered: 20,
          data: []
        });
      });
  },

score 1 · Answer 2 · answered Jul 30 '18 at 15:33

1

The values passed in dataTablesParameters does not include the current page. You can calculate that by using (start + length) + 1 from the passed parameters. Hope this helps!

answered Jul 30 '18 at 15:33

Chinemere Okereke

311
5
11

score 0 · Answer 3 · answered Jun 15 '18 at 13:37

0

I just simply missed this. All properties like order, direction, page size etc. are send with post in a body (dataTablesParameters variable):

ajax: (dataTablesParameters: any, callback) => {

answered Jun 15 '18 at 13:37

Krzysztof Kaźmierczak

1,401
1
11
15

Hey i am using this but it is still not sending any kind of pagination, order etc with api. – Jayant Singh Sep 09 '18 at 14:30

score 0 · Answer 4 · edited Sep 27 '18 at 15:42

I think you are missing this... lengthMenu: [10, 20, 50, 100],

 this.dtOptions1 = {
      // Configure the buttons
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      language: {
        searchPlaceholder: "Search Table Elements"
      },
      lengthMenu: [10, 20, 50, 100],
      //  lengthChange: false,
      ajax: (dataTablesParameters: any, callback) => {

        this.UIS.getUI_Settings_ajax(dataTablesParameters).subscribe(resp => {
          let filteredData = []; 
          let i=1;
          resp.data.forEach(element => {
            element['options'] = '-';
            element['sno'] = i++;
            filteredData.push(element)
          });
           this.tableData = filteredData
          //  this.tabaleData = filteredData

          callback({
            recordsTotal: this.tableData.length,
            recordsFiltered: resp.tot_count,
            data: []
          });

        });
      },

    };

Angular 6 DataTables - how to get current page

4 Answers4