jquery datatable row.add with button event in angular 5

0
votes

I am new to jquery datatable. I am using jquery datatable in angular 5. I am facing problem with dynamic row add functionality.

addNewrow() {
    this.dataTable.row.add([<button onclick="myFun()" name="btn1">btn</button>,1,2,3]).draw(true);
  }

the above code used in angular 5. In above code as you can see I have added button to jquery datatble addNewrow()is angular function that contains jquery code. and I have triggered onClick event on the button(btn1) which gives a call to a myfun(). My problem is I am not able to call that myfun() in button. Please can you let me know the solution

2
jquerydatatableangular5

2 Answers

1
votes

You can add a row into table using jquery like below

function insertRow(){
  $('#table tbody').append(function(){
    return '<tr><td>inserted row </td><td><input type="button" value="new button added dynamically" onclick="insertRow()"</td></tr>'
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table' style='border: 1px solid black'>
  <thead>
    <th>
      heading 1
    </th>
    <th>
      heading 2
    </th>
  </thead>
  <tbody>
    <tr>
      <td>
        table data 1
      </td>
      <td>
        table data 2
      </td>
    </tr>
  </tbody>
</table>

<input type='button' onclick='insertRow()' value='insert row' />
0
votes

In this way, I use an event for a button in the dynamically added row in angular 5 using datatables

addNewrow() {
        this.dataTable.row.add(['<script>function myFun(){alert("you click me");}</script><button onclick="myFun()" name="btn1">btn</button>',1,2,3]).draw(true);
      }