PHP file ignoring bootstrap table design
Question
I am trying to retrieve data from a database and display it on the PHP file using the following code:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Control Panel</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="css/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="css/green.css" rel="stylesheet">
<!-- Datatables -->
<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="css/scroller.bootstrap.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-12 left_col">
<div class="left_col scroll-view">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_content">
<?php
$count_rows = 0;
include 'database_connection.php';
$sql = "SELECT date, ip, activate FROM software";
$result = $conn->query($sql);
echo "<table id='datatable-buttons class='table table-striped table-bordered'>
<tr>
<th>S/N</th>
<th>Date</th>
<th>IP Address</th>
<th>Activation</th>
</tr>";
while ($row = mysqli_fetch_array($result)) {
$count_rows++;
echo "<tr>";
echo "<td>" . $count_rows . "</td>";
echo "<td>" . $row['date'] . "</td>";
echo "<td>" . $row['ip'] . "</td>";
echo "<td>" . $row['activate'] . "</td>";
echo "</tr>";
}
mysqli_close($conn);
?>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="js/fastclick.js"></script>
<!-- NProgress -->
<script src="js/nprogress.js"></script>
<!-- iCheck -->
<script src="js/icheck.min.js"></script>
<!-- Datatables -->
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.bootstrap.min.js"></script>
<script src="js/buttons.flash.min.js"></script>
<script src="js/buttons.html5.min.js"></script>
<script src="js/buttons.print.min.js"></script>
<script src="js/dataTables.fixedHeader.min.js"></script>
<script src="js/dataTables.keyTable.min.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/responsive.bootstrap.js"></script>
<script src="js/dataTables.scroller.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<!-- Custom Theme Scripts -->
<script src="js/custom.min.js"></script>
</body>
</html>
I am getting the results but it's not properly formatted. With almost the same code I can get the design but not the data: Here's the code that is working but not showing the data.
index.html (Incomplete code)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Control Panel</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="css/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="css/green.css" rel="stylesheet">
<!-- Datatables -->
<link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="css/scroller.bootstrap.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-12 left_col">
<div class="left_col scroll-view">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th>S/N</th>
<th>Date</th>
<th>IP Address</th>
<th>Activation</th>
</tr>
</thead>
<tbody>
<tr>;
<td> $row['id'] </td>
<td> $row['date'] </td>
<td> $row['ip'] </td>
<td> $row['activate'] </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="js/fastclick.js"></script>
<!-- NProgress -->
<script src="js/nprogress.js"></script>
<!-- iCheck -->
<script src="js/icheck.min.js"></script>
<!-- Datatables -->
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.bootstrap.min.js"></script>
<script src="js/buttons.flash.min.js"></script>
<script src="js/buttons.html5.min.js"></script>
<script src="js/buttons.print.min.js"></script>
<script src="js/dataTables.fixedHeader.min.js"></script>
<script src="js/dataTables.keyTable.min.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/responsive.bootstrap.js"></script>
<script src="js/dataTables.scroller.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<!-- Custom Theme Scripts -->
<script src="js/custom.min.js"></script>
</body>
</html>
Of course I know that the index.html code is Incorrect or incomplete. However it does load the bootstrap table design perfectly. What am I doing on the PHP file?
Please guide me here.
Screenshot of index.php : http://oi65.tinypic.com/z7ed3.jpg
Screenshot of index.html: http://oi68.tinypic.com/2zqqvc6.jpg
1 answers
solution1
1 ACCPTED 2018-08-15 20:25:09
Please change your code in index.php file:
<table id='datatable-buttons class='table table-striped table-bordered'>
to
<table id='datatable-buttons' class='table table-striped table-bordered'>
you didn't close quote after id datatable-buttons and add </table> after the end of while block
In your case, you can change your code to code below:
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th>S/N</th>
<th>Date</th>
<th>IP Address</th>
<th>Activation</th>
</tr>
</thead>
<tbody>
<?php
$count_rows = 0;
include 'database_connection.php';
$sql = "SELECT `date`, `ip`, `activate` FROM `software`";
$result = $conn->query($sql);
while ($row = mysqli_fetch_array($result)):
$count_rows++;
?>
<tr>
<td><?php echo $count_rows ?></td>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['date']; ?></td>
<td><?php echo $row['ip']; ?></td>
<td><?php echo $row['activate']; ?></td>
</tr>
<?php endwhile; ?>
</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
PHP ignoring config file
PHP file layout/design
SQL/ PHP Joining table, ignoring multiple records
HTML CSS PHP, Table design
Design php output table with css
SQL/PHP: Table design question
How to design the bootstrap columns dynamically in php
PHP file_get_contents ignoring timeout?
PHP CURL seems to be ignoring cookie jar/file
PHP file in Twitter Bootstrap?
Related Tags