Angular 6 Datatables Add click event for button

Question

So, I cannot seem to find an answer anywhere about this.

I was trying to use this the "Server way" which works great, until you find out the limitations. Like the "select" plugin does not work, or you cant use "expanding" tables

So, I need to go back to using Datatable natively.

Let's say I define my table like this

this.dtOptions = {
  ajax: (dataTablesParameters: any, callback: any) => {
    this.myService.myEndPoint(dataTablesParameters).
    subscribe((resp: any) => {
      this.attributes = resp.aaData;

      callback({
        recordsTotal: resp.iTotalRecords,
        recordsFiltered: resp.iTotalDisplayRecords,
        data: resp.aaData
      });
    });
  },
  select: true,
  order: [2, "asc"],
  columns: [{
      data: null,
      defaultContent: 'details',
      orderable: false,
      class: 'details-control'
    },
    {
      data: null,
      orderable: false,
    },
    {
      data: "skuPartNumber",
      orderable: true,
    },
    {
      data: "activeUnits",
      orderable: true
    },
    //{ data: "consumedUnits", orderable: true }
    {
      title: "Display Name",
      data: null,
      orderable: true,
      render: (data, type, full) => `<button (click)="testClick(data.id)">sdfsdf</button>`
    }
  ]
};

How can I listen for the button event? My assumption is the page is rendered (compiled) before the AJAX and data table completes?

I was able to do this in knockoutJS and durandal, but cannot figure this out in Angular

I am adding the HTML(with a button and a click event) AFTER Angular has processes the page. How do I get the event to fire? Must be a way, I just dont know how to do it — JCircio
– JCircio, Commented Oct 14, 2018 at 13:33
I should have been more clear.. I need to re-bind (not sure the terminology) Angular. I need to be inside the “Angular” context, so I can pass data into the function from the row.. Like an id, or something else. — JCircio
– JCircio, Commented Oct 14, 2018 at 23:56

HasilT · Accepted Answer · 2018-10-14 02:59:09Z

1

If you are using server-side rendering you can define your click events on drawCallback (docs)

this.dtOptions = {
    ...
    "drawCallback": ()=>{
        //define your listeners here
    }
    ...

answered Oct 14, 2018 at 2:59

HasilT

2,6092 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JCircio Over a year ago

What exactly does "define your listeners here" look like? Thats what I dont know.

HasilT Over a year ago

define event listeners for your button. something like document.getElementById('idOfButton').addEventListener('click',testClick(5))

Sunil · Accepted Answer · 2018-10-14 13:55:25Z

1

You can capture event in drawCallback.

let table = $('#example').DataTable({
      drawCallback: () => {
        $('.buttonClass').on('click', () => {  //click event on button with class `buttonClass`
            this.nextButtonClickEvent();
          });
      }
    });

Refer this demo which has table pagination https://stackblitz.com/edit/angular-datatables-pagination

answered Oct 14, 2018 at 13:55

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

1 Comment

JCircio Over a year ago

I should have been more clear.. I need to re-bind (not sure the terminology) Angular. I need to be inside the “Angular” context, so I can pass data into the function from the row.. Like an id, or something else.

Collectives™ on Stack Overflow

Angular 6 Datatables Add click event for button

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related