如何在带有自定义html的jquery数据表中为每一列添加一行，从而将html代码保留在模板中并将javascript代码保留在单独的文件中？

Question

I have a datatable. I want to simply add a row or delete dynamically. For deleting the row we simply use fnRowDelete() function which makes all task easy.

<table>
  <tr>
    <td><p>sr no</p></td>
    <td><div>First name</div></td>
    <td><div>Last name</div></td>
  </tr>
</table>

However adding a new row using fnAddData(1,"john","doe") does the job but it will add a row by adding this data directly inside the tag with no custom html.

<table>
  <tr>
    <td>1</td>
    <td>john</td>
    <td>doe</td>
  </tr>
</table>

Here i want to add this row with its html tags as well. if we pass html as string in the function fnAddData() to get required output, we will not be able to make both javascript and html code separate (use of template).

Is there any way how i can keep both javascript and html code in different file and still be able to add a row in required format.

Required sample output:-

<table>
  <tr>
    <td><p>1</p></td>
    <td><div>john</div></td>
    <td><div>doe</div></td>
  </tr>
</table>

Answer 1

The better way to do is add custom template to your data-table rows.

 "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<button>Click!</button>"
    } ]

When Data is null, it will take from default template. If you want, you can format the data with the template according to your requirement.

Answer 2

use .html() to append. like this

$( "td" ).html( "<p>+'jsonData.Number'+</p>" );