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

【问题标题】：How to add a row in a jquery datatable with custom html for each column keeping html code in template and javascript code in separate files?如何在带有自定义html的jquery数据表中为每一列添加一行，将html代码保存在模板中，将javascript代码保存在单独的文件中？
【发布时间】：2015-04-16 06:53:51
【问题描述】：

我有一个数据表。我想简单地添加一行或动态删除。为了删除行，我们只需使用 fnRowDelete() 函数，这使所有任务变得容易。

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

但是，使用 fnAddData(1,"john","doe") 添加新行可以完成这项工作，但它会通过直接在标签内添加此数据来添加一行，而无需自定义 html。

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

在这里，我也想用它的 html 标签添加这一行。如果我们在函数 fnAddData() 中将 html 作为字符串传递以获取所需的输出，我们将无法将 javascript 和 html 代码分开（使用模板）。

有什么方法可以将 javascript 和 html 代码保存在不同的文件中，并且仍然能够以所需的格式添加一行。

所需的样本输出：-

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

【问题讨论】：

应该有一种类似“append”的方式在元素中添加数据。看看 jQuery 文档...顺便说一句，看看这个：stackoverflow.com/questions/171027/add-table-row-in-jquery。这样就可以了，你可以在你的桌子上放任何你想要的东西......
@jayshree - 显示你的函数 fnAddData()
如果你想从一个单独的文件中获取你的 html 数据，只需使用 jQuery $.ajax({}) 函数并回调结果。然后，要添加您的行，只需查看我之前的评论...或使用您神秘的 fnAddData 函数！
@Julo0sS 使用 dom 操作函数（如 append）添加行有助于提高 ui 可见性，但由于它不在数据表中，搜索和数据表排序等功能不会考虑我们添加的 html 行。跨度>
@Shiv fnAddData() 是 dataTable 本身的函数。 datatables.net/forums/discussion/19004/…

标签： javascript jquery datatables

【解决方案1】：

更好的方法是将自定义模板添加到您的数据表行。

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

当 Data 为 null 时，它将从默认模板中获取。如果需要，您可以根据需要使用模板格式化数据。

【讨论】：

【解决方案2】：

使用.html() 追加。像这样

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

【讨论】：