Twitter Bootstrap Datatable与AJaX无法正常工作

Question

使用这段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>"

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

分页和搜索领域不见了！代码没有区别，但为什么第二个表缺少这些功能？

Answer 1

动态添加表格后。您必须再次应用dataTable（）。 请参阅此示例：http://jsfiddle.net/bassjobsen/8GNpf/

或者例如，在点击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>>"
    });});