3

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

这是我的代码：

索引.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>

表.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 旨在每 2000 毫秒刷新一次表，而 table.php 在我的实际情况下实际上更复杂，并且需要条件单元格背景和链接，这就是为什么我没有选择使用服务器端处理 (JSON) 来处理表数据.

知道为什么该$('#data').dataTable();命令不起作用吗？

4

3 回答 3

2

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

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

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

于 2012-07-13T16:50:33.547 回答
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 文件中。

于 2012-07-13T16:50:44.037 回答
2

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

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

或使用ajaxSuccess()：

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

$('#data').ajaxSuccess(function(){
    $(this).dataTable()
})
于 2012-07-13T16:52:49.243 回答