Using full featured Datatables Plugin with Angular 6

Question

I am trying to add Datatables plugin (datatables.net) facility with my angualar 6 project. I am not sure how should I include the necessary css, js and other required files

Answer 1

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ToastrManager } from 'ng6-toastr-notifications';
import { environment } from 'src/environments/environment';
import { HttpClient, HttpParams } from '@angular/common/http';
import { LoginService } from '../login.service';
declare var $;

class SiteModal {
  OrderNumber: string;
  ContactName: string;
  EntityName: string;
  ContactNo: string;
  CategoryName: string;
  StatusName: string;
}

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


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



export class SiteComponent implements OnInit {
  @ViewChild('dataTable') table: ElementRef;
  dataTable: any;
  dtOptions: DataTables.Settings = {};
  siteModal: SiteModal[];
  dataTablesResponse: DataTablesResponse[];
  datatable: any;
  public data: Object;
  public temp_var: Object = false;

  constructor(
    private http: HttpClient,
    public toastr: ToastrManager,
    private LoginService: LoginService
  ) { }



  ngOnInit(): void {
    const that = this;
  
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      ordering: false,
      searching: false,


      ajax: (dataTablesParameters: any, callback) => {
        let params = new HttpParams();
        let startNumber: any;

        startNumber = dataTablesParameters.start;
        if (startNumber != 0) {
          startNumber = startNumber + 1
        } else {
          startNumber = startNumber;
        }
        params = params.append("start", startNumber);
        params = params.append("length", dataTablesParameters.length);
        let param = params.toString();
        setTimeout(() => {
          $(".dataTables_empty").hide();
        }, 500);
        that.http
          .post(
            environment.apiUrl + "api/Entity/GetSiteList",
            params, {}
          ).subscribe(resp => {
            that.siteModal = resp.data;
            debugger
            setTimeout(() => {
              $(".dataTables_empty").hide();
            }, 500);
            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'OrderNumber' }, { data: 'ContactName' }, { data: 'EntityName' }, { data: 'ContactNo' }, { data: 'StatusName' }, { data: 'CategoryName' }]
    };


  }

}

        
Site 
    
    
    

        

            

                

                    

                        

                            

                              

                                
Order #
                                
ContactName
                                
Entity Name
                                
ContactNo
                                
StatusName
                                
Category Name
                              
                            
                            

                                

                                    
{{ data.OrderNumber }}
                                    
{{ data.ContactName }}
                                    
{{ data.EntityName }}
                                    
{{ data.ContactNo }}
                                    
{{ data.StatusName }}
                                    
{{ data.CategoryName }}