来自 PHP 脚本的实时表上的 jQuery DataTables

Question

我在执行DataTables 时遇到问题，我无法让它在PHP 脚本返回的表中工作。假设这个简单的 PHP 脚本名为 simple_table.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();
    } );
} );