dataTable parameters not working in angular 6

Question

I am using dataTables in angular 6 the is coming fine and displaying it perfectly as expected. but if i click on pagination or changed the page length or search anything it doesn't send any parameter with api like it does in jquery dataTable here is my code

component.ts file

import { Component, OnInit } from '@angular/core';
import { adminLteConf } from '../admin-lte.conf';
import {Http} from "@angular/http";
import { HttpClient, HttpResponse } from '@angular/common/http';

import { HttpHeaders } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-listmasterlog',
  templateUrl: './listmasterproducts.component.html',
  styleUrls: ['./listmasterproducts.component.css']
})
export class ListmasterproductsComponent implements OnInit {

  public data: any[];
  public filterQuery = "";
  public mfRowsOnPage = 10;
  public mfActivePage: any;
  public sortOrder = "asc";

  dtOptions: DataTables.Settings = {}; 
  metaData:any;


  constructor(private http: Http) { }

  ngOnInit(): void {
    this.dtOptions = {
      //pagingType: 'full_numbers',

      processing: true,
      serverSide: true,

      pageLength:10,
      language: {
        lengthMenu: "_MENU_",
        paginate: {
          first:'',
          last:'',
          next: '<i class="fa fa-chevron-circle-right">', // or '→'
          previous: '<i class="fa fa-chevron-circle-left">' // or '←' 
        }
      },
      dom: '<t><"bottom"p><"inline-flex" li><"clear">',
      ajax:(dataTablesParameters:any, callback) => {
        this.http.get(
          adminLteConf.APIURL+"?io=masterprod&action=list",
          dataTablesParameters
        ).subscribe(resp=> {
          var resposnse = resp.json();
          this.data = resposnse['data'];
          //console.log(this.packages);

          callback({
            recordsTotal: resposnse['meta'].total,
            recordsFiltered: resposnse['meta'].pages,
            data: []
          });
        });
      }
      // columns: [
      //   { data: "RecordId"}, {data: 'PackageName'}, {data: 'Price'}
      // ],
    };



  }

}

This is what i am getting in header when i check the network section inside inspect element

http://example.com/webapi/?io=masterprod&action=list&value=&regex=false

I am googling it from last three days but found nothing.

The above image is of my tables pagination displaying perfectly data coming fine but the functionality is not working. Everytime i click on pagination or changed the length the api hit but without any parameters

Damika · Accepted Answer · 2021-02-08 03:01:48Z

0

Add your scripts and styles to the angular.json file

answered Feb 8, 2021 at 3:01

Damika

8322 gold badges9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jayant Singh · Accepted Answer · 2018-09-10 12:37:25Z

Well i have made some changes and yes my code is working now. It is passing parameter with url. Below is my updated code, i have replaced http.get with http.post and also made some changes for header

import { Component, OnDestroy, OnInit, ViewChild, AfterViewInit } from 

'@angular/core';
import { adminLteConf } from '../admin-lte.conf';
import {Http, RequestOptions, Headers} from "@angular/http";
import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';


import { DataTableDirective } from 'angular-datatables';

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}


const ParseHeaders = {
  headers: new HttpHeaders({
   'Content-Type'  : 'application/x-www-form-urlencoded'
  })
 };


@Component({
  selector: 'app-listmasterlog',
  templateUrl: './listmasterproducts.component.html',
  styleUrls: ['./listmasterproducts.component.css']
})
export class ListmasterproductsComponent implements OnInit {
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;



  public masterprods: any[];
  public filterQuery = "";
  public mfRowsOnPage = 10;
  public mfActivePage: any;
  public sortOrder = "asc";
  public page :number;
  data : any[];
  dtOptions: DataTables.Settings = {}; 


  constructor(private http: HttpClient) { }

  ngOnInit(): void {

    this.dtOptions = {
      processing: true,
      serverSide: true,
      destroy:true,
      paging:true,
      ordering:true,
      //displayStart:2,
      pageLength:10,
      searchDelay: 2000,
      lengthChange:true,
      language: {
        lengthMenu: "_MENU_",
        paginate: {
          first:'',
          last:'',
          next: '<i class="fa fa-chevron-circle-right">', // or '→'
          previous: '<i class="fa fa-chevron-circle-left">' // or '←' 
        }
      },
      dom: '<t><"bottom"p><"inline-flex" li><"clear">',
      ajax:(dataTablesParameters:any, callback) => {

        this.http.post<DataTablesResponse>(
          "http://example.com/io=pro&action=lst",
          dataTablesParameters,ParseHeaders
        ).subscribe(resp=> {
          var resposnse = JSON.stringify(resp);
          var respsn = JSON.parse(resposnse);

          this.masterprods = respsn.data;

          callback({
            recordsTotal: respsn.meta['total'],
            recordsFiltered: respsn.meta['pages'],
            data: []
          });
        });
      },

    };

  }


}

Now i can see in network section all the parameters i want to send

{"draw":1,"columns":[{"data":0,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":1,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":2,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":3,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":4,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":5,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":6,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":7,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}

Collectives™ on Stack Overflow

dataTable parameters not working in angular 6

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related