Integrate Datatable with Angular 6 Application — Part 2— Feature enable / disable.

This is the continuation of part 1. if you may not read part 1. please red it first.

Previous Parts

Part 1 — Zero configurations

Disabling features that you don’t wish to use for a particular table is easily done by setting a variable in the initialization object.

Configuring Datatable Settings:

your app.component.ts file should be like this

import {Component, ViewChild, OnInit} from '@angular/core';
declare var $;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  @ViewChild('dataTable') table;
  dataTable: any;
  dtOption: any = {};
  constructor(){
  }

  ngOnInit(): void {
    this.dtOption = {
        "paging":   false,
        "ordering": false,
        "info":     false
    };
    this.dataTable = $(this.table.nativeElement);
    this.dataTable.DataTable(this.dtOption);
  }
}

create a new variable for datatable settings

dtOption: any = {};

initialize the variable with datatable options

this.dtOption = {
        "paging":   false,
        "ordering": false,
        "info":     false
    };

here i am disable the following datatable options, they are pagination, sorting and table info.

this.dataTable.DataTable(this.dtOption);

this code will initialize the datatable with configured settings.

Previous Part | Next Part

Subscribe my channel on YouTube