Question

我正在尝试从构建表的单独.php文件初始化dataTable。它构建表可以，但dataTable属性似乎没有生效。

这是我的代码：

的index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" language="javascript" src="jquery.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#live_table').load("table.php");
                var refreshId = setInterval(function() {
                    $('#live_table').load("table.php");
                }, 2000);
                $.ajaxSetup({ cache: false });
                $('#data').dataTable();
            });
        </script>
        <title></title>
    </head>
    <body>
        <div id="live_table">
        </div>
    </body>
</html>

table.php

<table id="data">
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

index.php意味着每2000ms刷新一次表，table.php在我的实际情况下实际上更复杂，并且需要条件单元格背景和链接，这就是为什么我没有选择使用服务器端处理（JSON）对于表数据。

知道$('#data').dataTable();命令无效的原因吗？

Answer 1

看起来问题是在实际加载表之前调用.dataTable()，因为.load调用是异步发生的，其余代码一直在运行。您需要在请求完成后使用第三个参数.load致电.dataTable()：

$('#live_table').load(
    "table.php",
    {},
    function() { $('#data').dataTable(); }
);

演示：http://jsfiddle.net/sAnUL/1/

Answer 2

我认为它没有加载，因为你正在使用一个尚不存在的选择器。

尝试：

$(document).ready(function() {
            $('#live_table').load("table.php");
            var refreshId = setInterval(function() {
                $('#live_table').load("table.php");
            }, 2000);
            $.ajaxSetup({ cache: false });
            $('#data').dataTable(); //This line should be in table.php

从技术上讲，DOM中没有元素#data。您应该将表初始化放在table.php文件中。

Answer 3

您可以使用load()方法的回调函数：

$('#live_table').load("table.php", function(){
    $('#data').dataTable();
});

或使用ajaxSuccess()：

附加要在Ajax请求成功完成时执行的函数。这是一个Ajax事件。

$('#data').ajaxSuccess(function(){
    $(this).dataTable()
})

从单独的.php表初始化dataTable

3 个答案: