Datatable with Angular, Adding buttons to rows with angular click event

Question

I am using datatable at my Angular application. I have lots of data and using server-side processing. When I add rows to table, I need to add a button to last row which has click event. Here is my html :

<div class="card m-t p-3">
    <div class="card-body">
        <table id="datatables"  class="table responsive table-bordered table-striped table-hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Quote</th>
                    <th>Author</th>
                    <th>Genre</th>
                    <th>Update</th>
                  </tr>
            </thead>
            
        </table>
    </div>
</div>

Here is my component.ts code (part of it )

 ngOnInit(): void {

this.key = this.keyManager.getKey();

if(this.key == ""){
  alertify.alert("LOGIN REQUIRED","Please go back to the login screen.",()=>{
    this.router.navigateByUrl("/login");
  })
}else{
  this.getAllQuotes();
}

this.dtOptions = {
  dom: 'B <"top"i>rt<"bottom"flp><"clear">',
  paging : true,
  responsive :true,
  processing: true,
  serverSide: true,
  ajax: {
    "url": this.baseUrl+"/api/Quote/paging?apiKey="+this.key,
    "type": "POST",
    "dataType": "json"
  },
  "columnDefs": [{
    "targets": [0],
    "visible": false,
    "searchable" : false
  }],
  "columns": [
    { "data": "id" },
    { "data": "text"},
    { "data": "author"},
    { "data": "genre"},
    {
      "data":null, "render":function(data,row){
        return `<button (click) = updateClicked2() class="btn btn-warning deleteBtn">Update</button>`;
      }
    }
    
  ]
};

And simple updateClicked2() method :

updateClicked2(){
console.log("clicked");

}

Here is the result on chrome:

It is not working. It should not be like that because one of my working buttons looks like:

So, I have to use my method from component.ts script because that update button will use router and change my app's route to another page. Please help me. Thank you.

I imagine you're using a "based JQuery" library. So you're in problems. You has no a function called "updateClicked2" (Angular rename your functions during transpile typeScript to javascript). My suggest it's use simple Angular (and run away all the librarys that use jQuery) — Eliseo
– Eliseo, Commented Mar 22, 2022 at 7:35
Yep, like @Eliseo said, try to use an Angular compatible library for your datatable. You'll find some good stuff at PrimeNg primefaces.org/primeng/#/table — Alain Boudard
– Alain Boudard, Commented Mar 22, 2022 at 9:26

Serkan Kutlu · Accepted Answer · 2022-03-22 21:18:33Z

1

I solved the problem like this (not adding buttons but make row clickable)

this.dtOptions = {
  rowCallback: (row:Node, data:Quote[] | object, index:number)=>{
  row.childNodes[0].textContent = String(index + 1);      
  const self = this;
  $('td' ,row).off('click');
  $('td',row).on('click',()=>{
    this.updateClicked(data as Quote);
  });
  return row;
  }
}

answered Mar 22, 2022 at 21:18

Serkan Kutlu

551 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Datatable with Angular, Adding buttons to rows with angular click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related