Adding button to each row of a datatable with event in angular 2

Question

I need to have a button at the end of each row in my datatable and get the row values when I click on it. Please see my code below.

In my .ts

ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this.us.getUsers()
      .subscribe((data: any) => {
      this.users = data;

      var table = $('#datatables').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        responsive: true,
        data:this.users,
        columns:[
          {
            data:"Id"
          },
          {
            data:"FirstName"
          },
          {
            data:"MiddleName"
          },
          {
            data:"LastName"
          },
          {
            data:"UserName"
          },
          {
            data:"Email"
          },
          {
            data:"DateAdded"
          },
          {
            data:"IsActivated"
          }
        ],
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search records",
        }
      });

    })
  }

In my ,html

<table id="datatables" class="table table-striped table-bordered table-hover" cellspacing="0"
    width="100%" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>FirstName</th>
            <th>MiddleName</th>
            <th>LastName</th>
            <th>UserName</th>
            <th>Email </th>
            <th>DateAdded</th>
            <th>Activated</th>

        </tr>
    </thead>

</table>

Can you please help me how to this right. I can't use the *ngFor loop because it causes issues int the datatables. Thank you.

Thanks to Nabil Shahid for the cool solution. If anyone has the problem that the buttons do not work on the second page or when the table is searched then you have to add a listener on the table draw event. See here https://stackblitz.com/edit/angular-hxdbgi-kw44dp — bort2012
– bort2012, Commented Sep 21, 2019 at 12:54

Nabil Shahid · Accepted Answer · 2018-10-31 10:54:47Z

4

You can do it using defaultContent key in columns object of datatable. First you need to create a <th> for showing the button column. I have created a stackblitz for achieving this. Please read the comments i have added in that stackblitz carefully before implementing it in your logic. I have added three buttons in it which show the data of current row. See: Buttons In Datatable

answered Oct 31, 2018 at 10:54

Nabil Shahid

1,45811 silver badges11 bronze badges

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

3 Comments

Ibanez1408 Over a year ago

Thank you for this WONDERFUL SOLUTION. I just have one last question though, if you will indulge me, instead of just the Id, I need to get all the data in a row in a click of one button. Thank you SO MUCH.

Nabil Shahid Over a year ago

All data in a row is returned by row.data() function. Instead of passing row.data().FirstName in a function, you can pass it directly to access whole object. See this stackblitz.com/edit/…. It logs all data of a row on console in showValue function on button click.

Nabil Shahid Over a year ago

No problem. Happy to help

Collectives™ on Stack Overflow

Adding button to each row of a datatable with event in angular 2

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related