Get row data with button click in Angular datatables

Question

I'm using responsive server side Angular datatables. I added a button in the table for editing. But when I click on the button to get the row data, it returns "Undefined". What is wrong in my code? Also i used rowCallback, but it does not work in responsive.

I used also rowCallback. But it does not work in responsive mode.here the code:

ngOnInit(): void {    

  this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  serverSide: true,
  processing: true,
  responsive: true,      
  ajax: (dtParams: DataTablesParameters, callback) => {
    this.http
      .post<DataTablesResponse>(
        environment.baseUrl + '/api/users/PostDataTable/',
        JSON.stringify(dtParams), {}
      ).subscribe(resp => {            
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: resp.data
        });
      });
  },
  columns: [
    { data: 'id', visible: false },
    { data: 'loginName' },
    { data: 'lastName' },
    { data: 'firstName' },
    {
      data: null,
      "render": function (data, type, row) {            
          return `<a class="btn btn-edit" data-elemnt-obj="${data}" role="button"><span class="glyphicon glyphicon-edit" style="font-size:20px;"></a >`;           
      }
    }
  ],
  // rowCallback: (row: Node, data: any[] | Object, index: number) => {
  //   const self = this;
  //               var element = $('td', row).find('a.btn-edit');
  //               if (element) {
  //                   element.unbind('click');
  //                   element.bind('click', () => {
  //                       self.someClickHandler(data);
  //                   });
  //               }
  //               return row;
  // },
  columnDefs: [
    {
      targets: [0],
      visible: false
    },
  ],  
};
$('.user-data-table').on('click', '.btn-edit', ($event) => {     
  var obj =  $($event).data('elemnt-obj');                  
  console.log(obj);     
});

<div class="table-responsive">
<table datatable [dtOptions]="dtOptions" width="100%" style="width:100% !important"
  class="user-data-table display table-bordered nowrapHeader nowrapBody">
  <thead>
    <tr>
      <th>id</th>
      <th>Login name</th>
      <th>Last name</th>
      <th>First name</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

I tried you code but I gett error again : "DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable.". here the code : let table = $('.user-data-table').DataTable({}); $('.user-data-table tbody').on( 'click', '.btn-edit', function () { let data = table.row($(this).parents('tr') ).data(); console.log(data); }); — Amin
– Amin, Commented Jul 5, 2019 at 11:32

Hien Nguyen · Accepted Answer · 2019-07-05 10:55:21Z

1

This is my way to get data row.

You can get data by data = table.row( $(this).parents('tr') ).data();

let table =  $('#mytable').DataTable({});
$('#mytable tbody').on( 'click', '.btn-edit', function () {
      let data = table.row( $(this).parents('tr') ).data();

      const id = data.YourProperty;
});

answered Jul 5, 2019 at 10:55

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

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

1 Comment

Amin Over a year ago

Actually I have tried it before. But i get this error: "Cannot read property 'row' of undefined"

Collectives™ on Stack Overflow

Get row data with button click in Angular datatables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related