Please help,
I have problem with a data table. The data table does not work when I use this but it's working when it's outside of this. Please help:
<div id="content">
<?php
$pages_dir = 'pages/admin';
if(!empty($_GET['p'])){
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages[1]);
$p = $_GET['p'];
if(in_array($p.'.php', $pages)){
include($pages_dir.'/'.$p.'.php');
}
else {
echo 'Page Not Found :(';
}
}
else {include($pages_dir.'/profile.php');}
?>
</div>
Then the other full script page, in this page data table is not working, but when I try this outside code before, it works.
<?php
$connect = mysqli_connect("localhost", "root", "", "keep");
$query ="SELECT * FROM barang ORDER BY ID DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Datatables Jquery Plugin with Php MySql and Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Datatables Jquery Plugin with Php MySql and Bootstrap</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>ID</td>
<td>Nama</td>
<td>Kategori</td>
<td>Harga</td>
<td>Jumlah</td>
<td>Supplier</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["nama"].'</td>
<td>'.$row["kategori"].'</td>
<td>'.$row["harga"].'</td>
<td>'.$row["jumlah"].'</td>
<td>'.$row["supplier"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
</script>
Please help, I'm new to PHP programming. Sorry for the bad English.
Related
I followed this tutorial on https://www.webslesson.info/2019/03/php-ajax-live-search-with-multiple-value.html
Everything works well, after hosting on my local computer. Except when I search data not available on my database , I want to get error message " No result found on this table" .
Please check the code.
You can check demo here as well, http://demo.webslesson.info/bootstrap-tags-input-with-php/. "No result found error does not pop up when we search invalid value.
Index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Data Search using Multiple Tag in PHP with Ajax</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>
<style>
.bootstrap-tagsinput {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<h2 align="center">Live Data Search using Multiple Tag in PHP with Ajax</h2><br />
<div class="form-group">
<div class="row">
<div class="col-md-10">
<input type="text" id="tags" class="form-control" data-role="tagsinput" />
</div>
<div class="col-md-2">
<button type="button" name="search" class="btn btn-primary" id="search">Search</button>
</div>
</div>
</div>
<br />
<div class="table-responsive">
<div align="right">
<p><b>Total Records - <span id="total_records"></span></b></p>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Customer Name</th>
<th>Gender</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div style="clear:both"></div>
<br />
<br />
<br />
<br />
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data)
{
$('#total_records').text(data.length);
var html = '';
if(data.length > 0)
{
for(var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td>'+data[count].CustomerName+'</td>';
html += '<td>'+data[count].Gender+'</td>';
html += '<td>'+data[count].Address+'</td>';
html += '<td>'+data[count].City+'</td>';
html += '<td>'+data[count].PostalCode+'</td>';
html += '<td>'+data[count].Country+'</td></tr>';
}
}
else
{
html = '<tr><td colspan="5">No Data Found</td></tr>';
}
$('tbody').html(html);
}
})
}
$('#search').click(function(){
var query = $('#tags').val();
load_data(query);
});
});
</script>
Fetch.php
<?php
//fetch.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$output = '';
$query = '';
if(isset($_POST["query"]))
{
$search = str_replace(",", "|", $_POST["query"]);
$query = "
SELECT * FROM tbl_customer
WHERE CustomerName REGEXP '".$search."'
OR Address REGEXP '".$search."'
OR City REGEXP '".$search."'
OR PostalCode REGEXP '".$search."'
OR Country REGEXP '".$search."'
";
}
else
{
$query = "
SELECT * FROM tbl_customer ORDER BY CustomerID
";
}
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
?>
as future reference my answer in more than 1 comment line:
In Fetch.php the variable $data will only exist in the case one or more answers are found.
otherwise, the var $data is still not present at the last line: json_encode($data);
Would you have your error_reporting on, it would give you a message about "undefined var data on line X".
PHP will forgive you, and suppose $data has value NULL; So you get a json_encoded form or NULL.
So if you put in the top of your Fetch.php it will always exist and be an empty or a filled array.
This will avoid your error in Javascript where you cannot read the length of NULL.
An empty array however has length = 0.
I have used Datatables to make my generic table look good. It has started working accurately like showing how many pages to show and a search box. But It does not do any functionality like search or pagination.
Here is my code
<?php include 'db.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$.extend( true, $.fn.dataTable.defaults, {
"info": false
} );
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</head>
<body>
<table id="myTable" width="99.8%" class="order-column table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Subject</th>
<th scope="col">Category</th>
<th scope="col">Actions</th>
</tr>
</thead>
<?php
$sql = "SELECT * FROM hr;";
$result = mysqli_query($conn , $sql);
while($row = mysqli_fetch_assoc($result)) : ?>
<tbody>
<tr>
<?php
$id = $row['hr_id'];
$timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp)); ?>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
<td><a class="btn btn-outline-primary btn-sm" <?php echo "href='HrThread.php?id=$id'" ?> >See More</a></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Data fetching is working fine. The table is looking fine also. The only thing that i want is for it to work properly like a datatable should.
I changed some of your script tags and link tags and moved them around a little and changed your code to:
<?php include 'db.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table id="myTable" width="99.8%" class="order-column table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Subject</th>
<th scope="col">Category</th>
<th scope="col">Actions</th>
</tr>
</thead>
<?php
$sql = "SELECT * FROM hr;";
$result = mysqli_query($conn , $sql);
while($row = mysqli_fetch_assoc($result)) : ?>
<tbody>
<tr>
<?php
$id = $row['hr_id'];
$timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp)); ?>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
<td><a class="btn btn-outline-primary btn-sm" <?php echo "href='HrThread.php?id=$id'" ?> >See More</a></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$.extend( true, $.fn.dataTable.defaults, {
"info": false
} );
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Try changing your code to this. I don't have the data to populate the table but this seemed to make pagination and the search functionality and everything a dataTable is supposed to do appear to work for me.
I'm generating a table using PHP that will retrieve records from a MySQL database. I'm new to DataTables, and my problem is that the "View Products" button that generates along with the table doesn't work. Clicking the button should redirect to a new page with an entirely different table.
here's a screenshot of what it looks like, just in case I'm not making any sense
Here's the entire code for the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\reset.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\stylesheet.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\og_stylesheet.css">
<style type="text/css">
thead {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- HEADER -->
<?php include "includes/header.php" ?>
<?php session_start();
?>
<!-- END HEADER -->
<table class="table table-striped" id="table_id">
<thead>
<tr>
<th>Supplier ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact Number</th>
<th>Supplier Details</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost", "root", "", "web_db");
$query = "SELECT * FROM Suppliers";
$search = mysqli_query($conn, $query);
if(mysqli_num_rows($search) > 0 ){
while($row = mysqli_fetch_array($search)){
?>
<form action="supplierdetails.php" method="POST">
<tr>
<td>
<?= $row['supplier_id']?>
</td>
<input type="hidden" value=< ?=$row[ 'supplier_id']?> name = "sup_id">
<input type="hidden" value=< ?=$row[ 'name']?> name = "name">
<td>
<?= $row['name']?>
</td>
<td>
<?= $row['address']?>
</td>
<td>
<?= $row['contactnumber']?>
</td>
<td><input type="submit" name="sub" value="View Products" class="btn btn-info" onclick="sample()"></td>
</tr>
</form>
<?php
}
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$(".alert").delay(3000).fadeOut();
});
</script>
<script>
function sample() {
window.alert(document.getElementById("name").getAttribute("value"));
}
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').DataTable();
});
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#table_id').DataTable();
/* Add event listeners to the two range filtering inputs */
$('#min, #max').keyup(function() {
table.draw();
});
});
</script>
</body>
</html>
The buttons work perfectly before I added DataTables, by the way. I also found out that a table with hard-coded data (as in without PHP) also have buttons that work fine. I'm pretty much at my wits end here. Any help will be appreciated.
Remove the onclick="sample()"
Add this in a document.ready
$(".btn-info").on("click", function() {
window.alert(document.getElementById("name").getAttribute("value"));
});
Maybe use a window.alert('test');
since I dont see the element with the id name anywhere
I am making one application in which the data is generated from my sql in html table format. I want to generate those data in excel format. Here is my code:
demo.php
<?php
include 'include/db_connection.php';
$query = "select * from main_master";
$result = mysql_query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Export HTML table to Excel File using Jquery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 class="text-center">Export HTML table to Excel File using Jquery with PHP</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="30%">Name</th>
<th width="10%">Gender</th>
<th width="50%">Designation</th>
</tr>
<?php
while($row = mysql_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $row['B']; ?></td>
<td><?php echo $row['D']; ?></td>
<td><?php echo $row['E']; ?></td>
<td><?php echo $row['F']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div align="center">
<button name="create_excel" id="create_excel" class="btn btn-success">Create Excel File</button>
</div>
</div>
<br />
</body>
</html>
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
});
</script>
excel.php
<?php
header('Content-Type: application/vnd.ms-excel');
header('Content-disposition: attachment; filename='.rand().'.xls');
echo $_GET["data"];
?>
While executing above code, nothing is done. excel not generated. Please help.
I guess everything is working fine it's just you are trying to send too much data in url
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
You can not send a complete html of a table in get request (Query string)
Just redirect user to excel.php page send required parameter in query string if required to create a sql query.
Then instead of echo $_GET["data"];
write complete code of demo.php on excel.php
Now excel.php will look like
<?php
header('Content-Type: application/vnd.ms-excel');
header('Content-disposition: attachment; filename='.rand().'.xls');
include 'include/db_connection.php';
$query = "select * from main_master";
$result = mysql_query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Export HTML table to Excel File using Jquery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 class="text-center">Export HTML table to Excel File using Jquery with PHP</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="30%">Name</th>
<th width="10%">Gender</th>
<th width="50%">Designation</th>
</tr>
<?php
while($row = mysql_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $row['B']; ?></td>
<td><?php echo $row['D']; ?></td>
<td><?php echo $row['E']; ?></td>
<td><?php echo $row['F']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<br />
</body>
</html>
And you can remove css and js files from it.
Also you need to update your script
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var page = "excel.php";
window.location = page;
});
});
</script>
Or you can try this lib (Datatable) : https://datatables.net/extensions/buttons/examples/initialisation/export.html
I am using this example of a multiple selection dropdown list
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | How to Use Bootstrap Select Plugin with PHP JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<br />
<h2 align="center">How to Use Bootstrap Select Plugin with PHP JQuery</h2>
<br />
<div class="col-md-4" style="margin-left:200px;">
<form method="post" id="multiple_select_form">
<select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
<option value="Laravel">Laravel</option>
<option value="Symfony">Symfony</option>
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Zend">Zend</option>
<option value="Yii">Yii</option>
<option value="Slim">Slim</option>
</select>
<br /><br />
<input type="hidden" name="hidden_framework" id="hidden_framework" />
<input type="submit" name="submit" class="btn btn-info" value="Submit" />
</form>
<br />
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
$('#framework').change(function(){
$('#hidden_framework').val($('#framework').val());
});
$('#multiple_select_form').on('submit', function(event){
event.preventDefault();
if($('#framework').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
//console.log(data);
$('#hidden_framework').val('');
$('.selectpicker').selectpicker('val', '');
alert(data);
}
})
}
else
{
alert("Please select framework");
return false;
}
});
});
</script>
It works fine but I am trying to adjust the code mentioned on the page according my needs. I want to create a dynamic table with columns name what i selected from the Dropdown list
so instead of creating the table manually and giving names of the columns as my code here
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$ser="10.90.294.23";
$db="Framework";
$user="test";
$pass="test0";
$query = 'SELECT Laravel, Symfony, Codeigniter, CakePHP FROM Framework.list';
$dbDB = new PDO("odbc:Driver=ODBC Driver 13 for SQL Server;Server=10.90.294.23,1456;Database=Framework;Port=1456", $user, $pass);
?>
<!DOCTYPE html>
<html>
<head>
<title>HTML table using Jquery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 class="text-center">HTML table using Jquery with PHP</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Laravel</th>
<th width="30%">Symfony</th>
<th width="10%">Codeigniter</th>
<th width="50%">CakePHP</th>
</tr>
<?php
foreach ($dbDB->query($query) as $row) {
?>
<tr>
<td><?php echo $row['Laravel']; ?></td>
<td><?php echo $row['Symfony']; ?></td>
<td><?php echo $row['Codeigniter']; ?></td>
<td><?php echo $row['CakePHP']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<br />
</body>
</html>
I want the columns headers will be created automatically from the selected values.
I was thinking about storing the selected value in variable for example : Laravel,CakePHP,Yii,Slim then I create the header based on each text between the comma ","
Can anyone help with this please ? I have tried many ways but still can't make it work. Thank you.
If this is the same as the example then I would have thought your table would have one row and be comma delimited. This really isn't the best way but for your example you need to do.
$row = $dbDB->query($query);
$rows = explode(",",$row);
?>
<tr>
<?php
foreach ($rows as $r ) {
?>
<td><?php echo $r; ?></td>
<?php
}
?>
</tr>