Javascript 如何初始化DataTables.js'；使用jQuery创建表后加载函数？

我正在用ajax创建一个表。该表显示正确，并且是有效的html，但我无法正确初始化数据表

我有以下html代码：

<table class="dat">

该表的格式符合DataTables.js的表指南：

<table class="dat">
    <thead>
        <tr>
            <th>Logo</th>
            <th>Food Name</th>
            <th>Stuff</th>
            <th>Code</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Image</td>
            <td>Stuff here</td>
            <td>Description</td>
            <td>Code</td>
        </tr>
    </tbody>
</table>

标志
食品名称
东西
代码
形象
这里的东西
描述
代码

以及jquery AJAX的一部分：

success: function (z) {
    var json = $.parseJSON(z.d);

    var table = '<table class="dat">';
    table += "  <thead>";
    table += "      <tr>;"
    table += "          <th>Logo</th>";
    table += "          <th>Food Name</th>";
    table += "          <th>Stuff</th>";
    table += "          <th>Code</th>";
    table += "     </tr>";
    table += " </thead>";

    $.each(json, function (i, obj) {
        //console.log(obj);
        table += "  <tbody>";
        table += "      <tr>";
        table += "          <td> Image (" + obj.Logo + ")</td>";
        table += "          <td>" + obj.FoodName + "</td>";

        table += "          <td>";
        $.each(obj.Text, function (j, t) {
            table += t + "; ";
        });
        table += "          </td>"; // Stuff

        table += "          <td>" + obj.Code + "</td>";
        table += "      </tr>";
    });
    table += "  </tbody>";
    table += "</table>";
    $('.search_results').append(table);
    $('.dat').DataTable();
},

成功：函数（z）{
var json=$.parseJSON（z.d）；
var表=“”；
表+=”；
表+=“；”
表+=“徽标”；
表+=“食品名称”；
表+=“东西”；
表+=“代码”；
表+=”；
表+=”；
$.each（json，函数（i，obj）{
//控制台日志（obj）；
表+=”；
表+=”；
表+=“图像（“+obj.Logo+”）；
表+=“”+obj.FoodName+“”；
表+=”；
$.each（obj.Text，function（j，t）{
表+=t+“；”；
});
表+=“”；//内容
表+=“”+对象代码+“”；
表+=”；
});
表+=”；
表+=”；
$（'.search_results'）。追加（表格）；
$（'.dat'）.DataTable（）；
},

html显示正确，没有任何格式问题，也没有错误。我唯一能做的就是使用搜索功能，它不会清除不相关的内容。是否在追加功能之前调用DataTable（）？这正是我所怀疑的，但是搜索功能几乎完美地工作

如果是这样，在加载完表后如何调用它？如果没有，我做错了什么

---

提前谢谢

首先尝试删除任何先前的侦听器，这样DataTable可能已经附加到表中（特别是因为您通过类而不是ID来标识它）。然后，初始化表

所以，替换这个

$('.dat').DataTable();

用这个

$('.dat').DataTable().destroy();
$('.dat').DataTable();

---

原来我还忘了添加class=“display”我已经更改了这个，并将“dat”更改为一个ID而不是一个类。更多的东西被初始化（格式化），但是这个方法仍然不起作用。在创建表之前，我不会调用DataTable（）。奇怪的是，我得到的是一大块文本根本不是由我的代码生成的：“；”。这个带有大量空格的分号出现在表创建之前。啊哈！你的JS中有一个错误。这里<代码>表+=“；”这可能会导致许多问题（几乎肯定会破坏DOM，导致DataTable无法正常工作）。哦，哇。。。感谢VisualStudio为我自动完成了这项工作。哈哈！我修好了，但不幸的是，它仍然不起作用。嗯。。。我在你最初的问题中遗漏了一些东西。删除

complete:$（'.dat'）.DataTable（）

，看看这是否有帮助。如果在那里，也在成功回调中，那么它将调用初始化函数两次，这可能会做一些奇怪的事情。

$('.dat').DataTable().destroy();
$('.dat').DataTable();