DataTables.net dont stay responsive when i call the REST API

[MarcosRibeiroJesus]

First of all, thanks for great job and sorry if I don't understand the way how it's works. When the data is loaded in the DataTables.net, it's dont stay responsive like the example in template.

pesquisar-clientes.component.html

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <br>
        <div class="card">
          <div class="card-content">

            <div class="row">
              <form class="navbar-form navbar-left navbar-search-form" role="search" (ngSubmit)="pesquisar()">
                <div class="input-group" type="submit">
                  <input type="text" value="" class="form-control" placeholder="Procurar..." name="nome" [(ngModel)]="nome">
                  <span class="input-group-addon">
                    <i class="fa fa-search"></i>
                  </span>
                </div>
              </form>
            </div>

            <div class="toolbar">
              <!--        Here you can write extra buttons/actions for the toolbar              -->
            </div>
            <div class="fresh-table">
              <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                <thead>
                  <tr>
                    <th>{{ dataTable.headerRow[0] }}</th>
                    <th>{{ dataTable.headerRow[1] }}</th>
                    <th>{{ dataTable.headerRow[2] }}</th>
                    <th>{{ dataTable.headerRow[3] }}</th>
                    <th>{{ dataTable.headerRow[4] }}</th>
                    <th>{{ dataTable.headerRow[5] }}</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>{{ dataTable.footerRow[0] }}</th>
                    <th>{{ dataTable.footerRow[1] }}</th>
                    <th>{{ dataTable.footerRow[2] }}</th>
                    <th>{{ dataTable.footerRow[3] }}</th>
                    <th>{{ dataTable.footerRow[4] }}</th>
                    <th>{{ dataTable.footerRow[5] }}</th>
                  </tr>
                </tfoot>
                <tbody>
                  <tr *ngFor="let cliente of clientes | paginate: { itemsPerPage: 5, currentPage: p }">
                    <td>{{ cliente.nome }}</td>
                    <td>{{ cliente.cpfCnpj }}</td>
                    <td>{{ cliente.rgIe }}</td>
                    <td>{{ cliente.dataNascimento }}</td>
                    <td>{{ cliente.telefoneMovel }}</td>
                    <td>
                      <button class="btn btn-simple btn-warning btn-icon edit">
                        <i class="ti-pencil-alt" [routerLink]="['/clientes/editar-clientes', cliente.codigo ]"></i>
                      </button>
                      <button class="btn btn-simple btn-danger btn-icon remove" (click)="excluir(cliente)">
                        <i class="ti-close"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
              <pagination-controls class="myPagination" (pageChange)="p = $event" previousLabel="Anterior" nextLabel="Próxima">
              </pagination-controls>
            </div>
          </div>
          <!-- end content-->
        </div>
        <!--  end card  -->
      </div>
      <!-- end col-md-12 -->
    </div>
    <!-- end row -->
  </div>
</div>

pesquisar-clientes.component.ts

import { ClientesService } from './../clientes.service';
import { Component, OnInit, Input } from '@angular/core';
import { error } from 'util';
import { AuthService } from 'app/seguranca/auth.service';

declare var swal: any;
declare var $: any;

declare interface DataTable {
  headerRow: string[];
  footerRow: string[];
  // dataRows: string[][];
}

@Component({
  moduleId: module.id,
  selector: 'pesquisar-clientes-cmp',
  templateUrl: 'pesquisar-clientes.component.html'
})
export class PesquisarClientesComponent implements OnInit {

  codigo: number;
  nome: string;
  clientes = (this.clientes = []);
  public dataTable: DataTable;

  constructor(
    private clientesService: ClientesService,
    private auth: AuthService
  ) { }

  ngOnInit() {
    this.dataTable = {
      headerRow: ['Nome', 'CPF', 'RG', 'Nascimento', 'Celular', 'Opções'],
      footerRow: ['Nome', 'CPF', 'RG', 'Nascimento', 'Celular', 'Opções'],
      // dataRows: [[]]
    };

    this.pesquisar();
  }

   ngAfterViewInit(){

    $('#datatables').DataTable({
          "pagingType": "full_numbers",
      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
      responsive: true,
      language: {
      search: "_INPUT_",
          searchPlaceholder: "Search records",
      }
    });
  }

  pesquisar() {
    this.clientesService
      .pesquisar({ nome: this.nome })
      .then(clientes => (this.clientes = clientes));
  }

}

[chelaruc]

@MarcosRibeiroJesus Can you check the last comment from here: https://github.com/creativetimofficial/material-dashboard-pro-angular/issues/33 and tell me if it helps you or not.

[pantlavanya]

Hi @chelaruc,

Can you share a way how your using datatable with Angular 6 or how to populate "dataRows" array.

If you see the screen shot of of @MarcosRibeiroJesus table always show "No data available msg there".

[chelaruc]

@pantlavanya see this issue https://github.com/creativetimofficial/ct-material-dashboard-pro-angular/issues/33