Adding custom buttons to Datatable DOM

[sforsandeep]

I am really fedup with a requirement of adding custom element to DOM. I did it many times when using Jquery datatable, but the same approach not working in Angular Datatable which is said to have all the features of jquery datatable.

I have a datatable with below initialisation

 ngOnInit(): void {
    this.dtOptions = {
    
      pagingType: "full_numbers",
      
      pageLength: 10,
      
      processing: true,
      
      dom: "<'row'<'col-sm-6 col-md-3'l><'col-md-3 col-sm-6 btnToolbar'><'col-sm-12 col-md-6'f>>" +
      
        "<'row'<'col-sm-12'tr>>" +
        
        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"        
    };
}

Here as you can see I have specified a new DIV in the DOM has got a class btnTooolbar.

I need to add two buttons into that DIV. After some hours of headache I found something to use renderer2

So I have created

@ViewChild('.btnToolbar', { static: true }) d1!: ElementRef;

  ngAfterViewInit(): void {
    this.dtTrigger.next();
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('<button>Test<button>');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }

But it doesnt helped me in anyway.

It triggered an error

Cannot read properties of undefined (reading 'nativeElement')

Someone please help me.

[shanmukhateja]

Hi,

Could you try setting static: false for d1 and/or moving all that code in a setTimeout?

If it doesn't work, please provide a reproducible StackBlitz/GitHub link to investigate this.

[sforsandeep]

@shanmukhateja I tried static false already.

Fortunately I was able to resolve it using draw.dt event.

So I have created a rerender() function and in it I did

  rerender(): void {

    this.dtElement.dtInstance.then(element => {
      element.on('draw.dt', function () {
        $('#export_button').appendTo('.btnToolbar');
      });
    });

  }

So this rerender() function being called when the data is initialised
Now my buttons are showing inside the datatable DOM.