Skip to content

Instantly share code, notes, and snippets.

@estudijoanpuig

estudijoanpuig/UI_basic_datatables.php

Last active November 28, 2020 20:00
Show Gist options
  • Save estudijoanpuig/a44d4d0b2060e2c21fbb58d8b4ef97b7 to your computer and use it in GitHub Desktop.
Save estudijoanpuig/a44d4d0b2060e2c21fbb58d8b4ef97b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
UI_basic_datatables.php
<!DOCTYPE html>
<html>
<head>
<title>taula</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.10/dist/css/uikit.min.css" />
<!-- datatables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.uikit.min.css" />
<!--Add latest jQuery and fancybox files -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</head>
<body>
<div class="uk-container">
<table id="example" class="uk-table uk-table-hover uk-table-striped" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>nom</th>
<th>categoria</th>
<th><span uk-icon="icon: folder"></span></th>
<th><span uk-icon="icon: github"></span></th>
</tr>
</thead>
<tbody>
<?php
$servername = "127.0.0.1:3307";
$username = "";
$password = "";
$dbname = "template";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM `embed` order by nom asc";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
?>
<tr>
<th><?php echo "$row[id]";?></th>
<th><?php echo "$row[nom]";?></th>
<th><?php echo "$row[categoria]";?></th>
<th><a data-fancybox data-type="iframe" data-src="../embed/<?php echo "$row[url]";?>" href="javascript:;"><?php echo "$row[nom]";?></th>
<th><a href="<?php echo "$row[url_git]";?>" uk-icon="icon: <?php echo "$row[icon_ui]";?>" target="_blank"></a></th>
</tr>
<?php }
} else {
echo "0 results";
}
$conn->close();
?>
</tbody>
</table>
</div>
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.10/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.10/dist/js/uikit-icons.min.js"></script>
<!-- datatables -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.uikit.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment