How to display data from database in a datatable
Question
I followed a basic tutorial relating to data table with bootstrap but it only works for hard coded data.
How do I get it to work if I want to display it dynamically? It is displaying it but the search and showing # of entries isn't working. It's also saying no data available in table when it's actually displaying 3 data from my database.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br/>
<hr/>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Action</th>
</tr>
<?php
foreach ($allCategories_arr as $ar) {
echo "<tr><th>".$ar['category_id']."</th><td>".$ar['categoryname']."</td><th><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></th></tr>";
}
?>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
3 answers
solution1
1 ACCPTED 2017-01-18 13:53:27
Quick fixes, you should close your <thead> tag before you start your loop, and show the results inside the <tbody> once you inside the <tbody> you don't use the <th> tag anymore, you use your <tr>'s and <td>'s
This is how your code should look;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br/>
<hr/>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
foreach ($allCategories_arr as $ar) {
echo "<tr>";
echo "<td>".$ar['category_id']."</td>";
echo "<td>".$ar['categoryname']."</td>";
echo "<td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
Or Should look like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br/>
<hr/>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
foreach ($allCategories_arr as $ar) :?>
<tr>
<td><?php echo $ar['category_id'] ;?></td>
<td><?php echo $ar['categoryname'];?></td>
<td><a href="ManageSubCategory.php?catid="<?php echo $ar['category_id'];?>">Show Sub Categories</a>
</tr>
<?php
endforeach;
?>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
solution2
0 2017-01-18 13:44:45
Write this code in body tag
<?php
foreach ($allCategories_arr as $ar) {
echo "<tr><td>".$ar['category_id']."</td><td>".$ar['categoryname']."</td><td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></td></tr>";
}
?>
i hope it's work
solution3
0 2017-01-18 13:44:51
set php foreach inside <tbody> not <thead> and change <th> in foreach to <td>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
foreach ($allCategories_arr as $ar) {
echo "<tr><td>".$ar['category_id']."</td><td>".$ar['categoryname']."</td><td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></td></tr>";
}
?>
</tbody>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Laravel 7- How to use ajax to display data from database in a DataTable jQuery
How to display data in datatable?
Display data from XLSX to datatable
Save data from dataTable to database
How to display data in vuetify datatable
How can I extract JSON data from PHP and display it in a datatable?
How to save and display data retrieved from database
How to display the data fetched from the database in the form
How to display data from database with onclick in dropdown?
Error saving data from Datatable to MySQL database
Related Tags