my PHP file named "zero3data.php"
<?php
printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">');
printf('<thead>');
printf('<tr>');
printf('<th rowspan="2">#</th>');
printf('<th rowspan="2">Reference</th>');
printf('<th rowspan="2">Customer</th>');
printf('<th rowspan="2">Unit</th>');
printf('<th rowspan="2">Payment</th>');
printf('<th rowspan="2">Accessories</th>');
printf('<th rowspan="2">Points</th>');
printf('<th rowspan="2">Log</th>');
printf('<th colspan="2">Approval</th>');
printf('</tr>');
printf('<tr>');
printf('<th>Group Manager</th>');
printf('<th>Main Branch</th>');
printf('</tr>');
printf('</thead>');
printf('<tbody>');
require_once("config/db.php");
$db_connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$result = $db_connection->query('SELECT * FROM reservationvw ORDER by logsubmit DESC');
for($i=1;$row=$result->fetch_object();$i++) {
printf("<tr class='gradeC'>");
printf("<td class='center'>%d</td>", $i);
printf("<td class='center'>%s</td>", $row->reference);
printf("<td class='center'>%s <br/> %s</td>", strtoupper($row->cust_name), $row->cust_addr);
printf("<td class='center'>%s/%s/%s/%s/%s</td>", $row->model, $row->variant, $row->enginefuel, $row->transmission, $row->color);
printf("<td class='center'>%s/%s</td>", $row->payment, $row->insurance);
printf("<td class='center'>%s</td>", $row->accessories);
printf("<td class='center'>%3d</td>", $row->points);
printf("<td class='center'>%s</td>", $row->logsubmit);
printf("<td class='center'>%s</td>", $row->approved);
printf("<td class='center'>%s</td>", $row->main_approved);
printf("</tr>");
}
printf('</tbody>');
printf('</table>');
?>
my div tag in zero1.php
<body id="dt_example">
<div id="container">
<div id="demo">
<div id="content"></div>
</div>
<div>
</body>
I have a script that loads my PHP file into the "content" section. The table structure is rendered correctly, but the CSS styling is missing. My table is customized with the DataTables plugin, which can be found here: http://datatables.net/usage/. Here's my script:
<script>
$(document).ready(function(){
$('#content').load('zero3data.php');
});
</script>
Here are some methods I've tried to fix the missing CSS styling issue:
$.ajax({
url: 'zero3data.php',
success: function(data) {
$("#content").html(data).trigger('create');
}
});
$('#content').load('zero3data.php',function(){ $('#content').trigger('create'); });
I also copied necessary CSS styles from zero1.php to zero3data.php, thinking that reloading the styles might help.
Here's the head section from zero1.php:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<!-- bootstrap -->
<link href="../../css/bootstrap.css" rel="stylesheet">
<script src="../../js/jquery-2.0.3.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>