jquery datatable row.add with button event in angular 5

Question

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

noone · Accepted Answer · 2018-11-14 12:45:10Z

1

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' />

edited Nov 14, 2018 at 12:45

answered Nov 14, 2018 at 12:26

noone

6,5782 gold badges48 silver badges54 bronze badges

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

12 Comments

jayesh Over a year ago

My problem is how to add event for button(i.e btn) that added using dynamically

Sylent Over a year ago

@jayesh It's the onclick="functionName()" which fires off the event once the button is clicked. It's pretty unclear what you're asking here :D

noone Over a year ago

if you want to add a click event to a button just added to the dom dynamically ? see the answer

jayesh Over a year ago

@Sylent now you can understand

jayesh Over a year ago

@NuOne T Attygalle now you can understand

|

jayesh · Accepted Answer · 2018-11-17 08:37:49Z

0

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);
      }

answered Nov 17, 2018 at 8:37

jayesh

13 bronze badges

Collectives™ on Stack Overflow

jquery datatable row.add with button event in angular 5

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related