jQuery DataTables在PHP脚本中的活动表上

Question

我在实现DataTables时遇到了问题，我根本无法使它在PHP脚本返回的表中工作。假设这个名为simple_table.PHP的简单PHP脚本：

<?php
    echo '
    <table class="table_type">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>';
?>

现在，在hipotetic html文件中的</body>标记之后，我还有下一个非常简单的jQuery脚本：

$(document).ready( function () {
    $('table.table_type').dataTable();
} );
$('div.push_button li').click(function() {
    var content = $(this).closest('div').children('div.content');
    $.get('simple_table.php', {}, function(html_table) {
            content.html(html_table);
    } );
} );

为了让这个简单的例子发挥作用并保持简单，需要做些什么？问题是，对于这种由如此简单的脚本制作的动态表的有用场景，没有解决方案！

好吧，也许你必须有一个预先存在的<table>，只有你才能填充相应的<tr>。。。

Answer 1

问题是因为在页面包含元素table.table_type之前运行了.dataTable()。您不需要在页面加载时调用.dataTable()，而是需要在表添加到<div>后运行它。

$('div.push_button li').click(function() {
    var content = $(this).closest('div').children('div.content');
    $.get('simple_table.php', {}, function(html_table) {
            content.html(html_table);
            content.find('table').dataTable();
    } );
} );