Angular Jquery Datatable Render Button, Click Event not working

Question

A button is rendered by the script, but not able to attach a click event.

  import { Component, OnInit } from '@angular/core';
  declare var $: any;
  @Component({
    selector: 'app-hospital-manage',
    templateUrl: './hospital-manage.component.html',
    styleUrls: ['./hospital-manage.component.scss']
  })
  export class HospitalManageComponent implements OnInit {
    IsEdit = false;
    HospitalID = null;
    constructor() {}

    ngOnInit() {
      const t = $('#example').DataTable({
        processing: true,
        serverSide: true,
        info: true,
        ajax: {
          url: 'http://localhost:35257/data/searchhospital',
          data: function(data) {
            delete data.columns;
          }
        },
        // scrollY: 300,
        deferRender: true,
        // scroller: true,
        columns: [
          { data: 'HospitalName' },
          {
            render: function(data, type, item, meta) {
              return '<a class="btn btn-warning btn-sm" onclick="MyFunction()"><i class="fa fa-pencil"></i></a>';
            }
          }
        ],
        columnDefs: [{ orderable: false, targets: [0] }], // to disable columns order, may cause error if not put correctly
        order: [[1, 'asc']],
        select: true,
        dom: 'lfrtip',
        //  responsive: true,
        buttons: true,
        language: {
          emptyTable:
            '<div class="text-warning text-center">No Carton found.</div>'
        }
      });
    }

    public MyFunction() {
      alert();
    }
  }

Meet Rachhadia · Accepted Answer · 2019-07-24 10:29:36Z

2

At the end add another property for datatable called rowCallback.

`language: {
    emptyTable:
    '<div class="text-warning text-center">No Carton found.</div>'
},
rowCallback: (row: Node, data: any[] | Object, index: number) => {
    const self = this;
    // Unbind first in order to avoid any duplicate handler
    // (see https://github.com/l-lin/angular-datatables/issues/87)
    $('td', row).unbind('click');
    $('td', row).bind('click', () => {
    self.someClickHandler(data);
    });
    return row;
}
`

This worked for me. Check this link for more info- [https://l-lin.github.io/angular-datatables/#/advanced/row-click-event]

answered Jul 24, 2019 at 10:29

Meet Rachhadia

237 bronze badges

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

Comments

samuel gast · Accepted Answer · 2019-01-23 10:09:26Z

-1

try this:

render: function(data, type, item, meta) {
              return '<a class="btn btn-warning btn-sm" (click)="MyFunction()"><i class="fa fa-pencil"></i></a>';
            }

answered Jan 23, 2019 at 10:09

samuel gast

3927 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular Jquery Datatable Render Button, Click Event not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related