Question

If in content.php I do not fill the table with the data, then I can see properly formatted jquery data table. However, if I fill it with the data (I tried both DB data and manual input of some random numbers), it is not formatted anymore and looks like a hell. Could it happen that $.get(..) (used in test.php) does not work properly in this example?

test.php

    $(document).ready(function() {
        loadContent();
    });

    function loadContent() {
                            $.get('modules/mod_scheduler/content.php', function(data) {
                                $('#table').html(data);
                            });     
    }

<div id="table"></div>

content.php

<?php
    include_once '../../include/connect_db.php';

    $query = "SELECT * FROM `TestTable`";
    $result=execute_query($query);

?>



    <table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%">
                        <thead>
                            <tr>
                                <th scope="col">Flight Num</th>
                                <th scope="col">Appearance Time</th>
                                <th scope="col">Target Time</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php while($row=mysql_fetch_assoc($result)) {
                                        $flightNum=$row['flightNum'];
                                        $appearanceTime=$row['appearanceTime'];
                                        $targetTime=$row['targetTime'];
                            ?>
                            <tr>
                                <td><?php echo $flightNum; ?></td>
                                <td>

                                        <?php echo $appearanceTime;?>

                                </td>
                                <td>

                                        <?php echo $targetTime;?>

                                </td>

                                <td id="<?php echo $flightNum; ?>">
                                    <div>
                                        <img src='modules/images/edit.png' alt='Edit' />
                                    </div>
                                </td>
                            </tr>
                            <?php }?>
                        </tbody>
    </table>

Of course, I have also defined the following:

<link type="text/css" rel="stylesheet" href="modules/mod_scheduler/css/demo_table.css"/>
<link type="text/css" rel="stylesheet" href="modules/mod_scheduler/css/demo_page.css"/>
<link type="text/css" rel="stylesheet" href="modules/mod_scheduler/css/demo_table_jui.css"/>

<script type="text/javascript" src="modules/mod_scheduler/js/dataTable/jquery-ui.js"></script>
<script type="text/javascript" src="modules/mod_scheduler/js/dataTable/jquery.dataTables.js"></script>

<script language="javascript" type="text/javascript" src="modules/mod_scheduler/js/jqplot/plugins/jqplot.pointLabels.js"></script>

Answer 1

You are returning a table, but you are not calling dataTable() on it that I can see. The way the DataTables plugin works, you typically call the dataTable() on a table. I can’t recall what should happen with “arbitrary” style sheets (whatever styles you’ve set for the table), but certainly if you’re using jQuery UI (which it looks like you are), it won’t look right until you call the function, thereby adding all the necessary classes for jQuery UI theme. You could return those classes already in the table, but currently you are not.

Since you are doing this server-side, I would take it a step further and return JSON-formatted data for the table instead of a whole bunch of table markup. That’s the more elegant and manageable way of using DataTables.