jquery - Twitter Bootstrap 数据表无法与 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>>"
    });});