dataTable not sending any parameters in angular 6

Hi i have followed the on of your server side angular way tutorial everything is working fine except the parameters, Whenever i do click on pagination the pagination changed but onCallback first 10 data shows every time. this is because when i am hitting api it sends no parameter with it so it always return the same data. This is api which hit every time http://example.test/webapi/?io=masterpro&action=lst&value=&regex=false

as you can see it not sending any parameters with it that’s why it always returns the first 10 data as i set the length of data to 10 in my api 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: '', // or '→'
          previous: '' // or '←' 
        }
      },
      dom: '<t><"bottom"p><"inline-flex" li><"clear">',
      ajax:(dataTablesParameters:any, callback) => {
        this.http.get(
          adminLteConf.APIURL+"?io=masterpro&action=lst",
          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'}
      // ],
    };



  }

}

The above is in my component file I am using angular 6 and i haven’t find any tutorial which helped me with this so please show me some path or give me some solution for this. I am stuck in this stuff from last 4 or 5 days and it is very urgent to me

this is the image of my table below

[jayantsr83]

Hey @awais2080 my code is working now please tell me if you want that

[funlabscloud]

Issue fixed for me. setTimeout(() => { this.dtTrigger.next(); });

added before dtOptions