Jquery Twitter引导数据表不能与AJaX正常工作

使用这段HTML代码可以正常工作：

<table class = 'table table-bordered table-striped' id = 'example'>
    <thead><tr><th>Col1</th><th>Col2</th></tr></thead>
    <tbody>
        <tr><td>foo</td><td>foo</td></tr>
        <tr><td>foo</td><td>foo</td></tr>
    </tbody>
</table>

冷水
福福
福福

这是：

但当我在变量中存储相同的代码段时：

content = "<table class = 'table table-bordered table-striped' id = 'example'>" +
    "<thead><tr><th>Col1</th><th>Col2</th></tr></thead>" +
    "<tbody>" +
        "<tr><td>foo</td><td>foo</td></tr>" +
        "<tr><td>foo</td><td>foo</td></tr>" +
    "</tbody>" +
"</table>"

content=“”+
“Col1Col2”+
"" +
“福福”+
“福福”+
"" +
""

并通过AJaX动态调用，输出似乎有所不同，如本屏幕截图所示：

---

分页和搜索字段已消失！代码没有区别，但为什么第二个表缺少这些功能？

在动态添加表之后。您必须再次应用dataTable（）。 请参见此示例：

或者，例如，当单击带有

id=“addtable”

的按钮时，添加一个表格：

var content = "<table class = 'table table-bordered table-striped' id = 'example2'>" +
    "<thead><tr><th>Col1</th><th>Col2</th></tr></thead>" +
    "<tbody>" +
        "<tr><td>foo</td><td>foo</td></tr>" +
        "<tr><td>foo</td><td>foo</td></tr>" +
    "</tbody>" +
"</table>"


$('#addtable').click(function(){$('body').append(content);

$('body table').last().dataTable({
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
    });});

var content=“”+
“Col1Col2”+
"" +
“福福”+
“福福”+
"" +
""
$（'#addtable'）。单击（函数（）{$（'body'）。追加（内容）；
$（'body table'）.last（）.dataTable({
“sDom”：“t”
});});

为什么不请求数据（ajax）并让datatable完成工作？ajax调用是如何进行的？您如何让datatable知道通过ajax调用加载的数据？@RC您所说的更好，但我希望尽可能使用这种格式，因为这是我在这个遗留系统中的模式。@Raghu数据与html表一起加载。在我上面的例子中，我只想正确地加载引导表的正确功能，而不需要db连接。我仍然不知道它是如何工作的。但现在重要的是它的作用。谢谢巴斯。