Initialize dataTable from separate .php table
===

I am trying to initialize a dataTable from a separate .php file that builds a table.  It builds the table okay, but the dataTable properties do not seem to be in effect.

Here is my code:

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 is meant to refresh the table every 2000ms and table.php is actually more complex in my real situation and requires conditional cell backgrounds and links which is why I didn't choose to use the server side processing (JSON) for table data.

Any idea why the `$('#data').dataTable();` command isn't working?