tailwind 5 filtres i paginacio a postslar11
Created at: 2025-01-24 17:57:54 | Updated at: 2025-01-24 17:57:54
<?php
// Configuració de la connexió a la base de dades
$servername = "localhost";
$username = "joan";
$password = "queMm88/g62123";
$dbname = "postslar11";
// Crear connexió segura
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connexió fallida: " . $conn->connect_error);
}
// Obtenir paràmetres de la URL
$action = $_GET['action'] ?? 'index';
$categoryId = $_GET['category_id'] ?? null;
$tagId = $_GET['tag_id'] ?? null;
$query = $_GET['query'] ?? null;
// Variables de paginació
$postsPerPage = 15;
$currentPage = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$offset = ($currentPage - 1) * $postsPerPage;
// Funció per obtenir categories
function getCategories($conn)
{
$result = $conn->query("SELECT * FROM categories ORDER BY name ASC");
return $result->fetch_all(MYSQLI_ASSOC);
}
// Funció per obtenir etiquetes
function getEtiquetas($conn)
{
$result = $conn->query("SELECT * FROM etiquetas ORDER BY name ASC");
return $result->fetch_all(MYSQLI_ASSOC);
}
// Funció per obtenir posts amb filtres i paginació
function getPosts($conn, $filter = null, $search = null, $tag = null, $limit, $offset)
{
$sql = "SELECT SQL_CALC_FOUND_ROWS p.*, c.name AS category_name, p.url, p.ins, p.face, p.youtube, p.updated_at
FROM posts p
LEFT JOIN categories c ON p.category_id = c.id";
if ($filter) {
$sql .= " WHERE p.category_id = " . intval($filter);
}
if ($search) {
$sql .= $filter ? " AND" : " WHERE";
$sql .= " (p.title LIKE '%" . $conn->real_escape_string($search) . "%'
OR c.name LIKE '%" . $conn->real_escape_string($search) . "%')";
}
if ($tag) {
$sql = "SELECT SQL_CALC_FOUND_ROWS p.*, p.url, p.ins, p.face, p.youtube FROM posts p
INNER JOIN post_etiquetas pe ON p.id = pe.post_id
WHERE pe.etiqueta_id = " . intval($tag);
}
$sql .= " ORDER BY p.updated_at DESC LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);
$totalPosts = $conn->query("SELECT FOUND_ROWS() as total")->fetch_assoc()['total'];
return ['posts' => $result->fetch_all(MYSQLI_ASSOC), 'total' => $totalPosts];
}
// Gestionar accions
$categories = getCategories($conn);
$etiquetas = getEtiquetas($conn);
$posts = [];
$totalPosts = 0;
$result = getPosts($conn, $categoryId, $query, $tagId, $postsPerPage, $offset);
$posts = $result['posts'] ?? [];
$totalPosts = $result['total'] ?? 0;
$totalPages = ceil($totalPosts / $postsPerPage);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<!--Regular Datatables CSS-->
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<!--Responsive Extension Datatables CSS-->
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<!-- FANCYBOX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<style>
/*Overrides for Tailwind CSS */
/*Form fields*/
.dataTables_wrapper select,
.dataTables_wrapper .dataTables_filter input {
color: #4a5568;
/*text-gray-700*/
padding-left: 1rem;
/*pl-4*/
padding-right: 1rem;
/*pl-4*/
padding-top: .5rem;
/*pl-2*/
padding-bottom: .5rem;
/*pl-2*/
line-height: 1.25;
/*leading-tight*/
border-width: 2px;
/*border-2*/
border-radius: .25rem;
border-color: #edf2f7;
/*border-gray-200*/
background-color: #edf2f7;
/*bg-gray-200*/
}
/*Row Hover*/
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
background-color: #ebf4ff;
/*bg-indigo-100*/
}
/*Pagination Buttons*/
.dataTables_wrapper .dataTables_paginate .paginate_button {
font-weight: 700;
/*font-bold*/
border-radius: .25rem;
/*rounded*/
border: 1px solid transparent;
/*border border-transparent*/
}
/*Pagination Buttons - Current selected */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
color: #fff !important;
/*text-white*/
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
/*shadow*/
font-weight: 700;
/*font-bold*/
border-radius: .25rem;
/*rounded*/
background: #667eea !important;
/*bg-indigo-500*/
border: 1px solid transparent;
/*border border-transparent*/
}
/*Pagination Buttons - Hover */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: #fff !important;
/*text-white*/
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
/*shadow*/
font-weight: 700;
/*font-bold*/
border-radius: .25rem;
/*rounded*/
background: #667eea !important;
/*bg-indigo-500*/
border: 1px solid transparent;
/*border border-transparent*/
}
/*Add padding to bottom border */
table.dataTable.no-footer {
border-bottom: 1px solid #e2e8f0;
/*border-b-1 border-gray-300*/
margin-top: 0.75em;
margin-bottom: 0.75em;
}
/*Change colour of responsive icon*/
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
background-color: #667eea !important;
/*bg-indigo-500*/
}
</style>
<!-- Masonry -->
<style>
.masonry {
column-count: 4;
column-gap: 1rem;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 1rem;
}
@media (max-width: 1200px) {
.masonry {
column-count: 3;
}
}
@media (max-width: 992px) {
.masonry {
column-count: 2;
}
}
@media (max-width: 768px) {
.masonry {
column-count: 1;
}
}
</style>
</head>
<body class="bg-blue-100">
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1">
<a href="/" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
alt="">
</a>
</div>
<!-- Botó per OBRIR el menú mòbil -->
<div class="flex lg:hidden">
<button
id="open-menu-button"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<!-- Menu en mida gran (desktop) -->
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-900">Product</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Features</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Marketplace</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Company</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="/phpmyadmin" class="text-sm/6 font-semibold text-gray-900">PhpMyadmin <span aria-hidden="true">→</span></a>
</div>
</nav>
<!-- Menú mòbil (tancat per defecte gràcies a .hidden) -->
<div
id="mobile-menu"
class="lg:hidden hidden"
role="dialog"
aria-modal="true">
<!-- El backdrop (opcional gestionar-lo amb JS, però aquí ho deixem fix) -->
<div class="fixed inset-0 z-50"></div>
<div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
alt="">
</a>
<!-- Botó per TANCAR el menú mòbil -->
<button
id="close-menu-button"
type="button"
class="-m-2.5 rounded-md p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Product</a>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Marketplace</a>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Company</a>
</div>
<div class="py-6">
<a href="/phpmyadmin" class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">PhpMyadmin</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- La resta de secció "hero" -->
<div class="relative isolate px-6 pt-14 lg:px-8">
<!-- Contingut del Hero... -->
</div>
</div>
<script>
// Agafem referències als elements
const openMenuButton = document.getElementById('open-menu-button');
const closeMenuButton = document.getElementById('close-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
// Quan es clica el botó d'obrir, es retira la classe 'hidden'
openMenuButton.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
});
// Quan es clica el botó de tancar, es torna a afegir la classe 'hidden'
closeMenuButton.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
const menuLinks = mobileMenu.querySelectorAll('a');
menuLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
</script>
<!-- HERO -->
<div class="relative overflow-hidden">
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-6">
<div class="text-center">
<h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-5xl">Posts Gallery<!-- --> <span class="relative whitespace-nowrap text-blue-600"><svg aria-hidden="true" viewBox="0 0 418 42" class="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70" preserveAspectRatio="none">
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path>
</svg><span class="relative">tailwind-4</span></span> <!-- -->totalment responsive.</h1>
<p class="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">Pots cercar al formulari, a les categories o a les etiquetes de cada card.</p>
<div class="mt-2 sm:mt-2 mx-auto max-w-xl relative">
<form method="GET" action="tailwind4_datatables_postslar11.php">
<input type="hidden" name="action" value="search">
<div class="flex gap-x-3 p-3 bg-white border rounded-lg shadow-lg">
<input type="text" name="query" placeholder="Cerca article" class="py-2 px-4 w-full border-transparent rounded-lg">
<button type="submit" class="size-[46px] bg-blue-600 text-white rounded-lg">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
<div class="mt-2 sm:mt-2">
<?php foreach ($categories as $category): ?>
<a href="tailwind4_datatables_postslar11.php?action=filterByCategory&category_id=<?= $category['id'] ?>"
class="m-1 py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border bg-white shadow-sm">
<?= $category['svg'] ?> <?= htmlspecialchars($category['name']) ?>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<div class="bg-blue-200 py-2 sm:py-4">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<!-- Contingut amb Masonry -->
<div class="container mx-auto px-4">
<div class="masonry">
<?php foreach ($posts as $post): ?>
<div class="masonry-item bg-white p-6 rounded-lg shadow-lg">
<div class="flex items-center gap-x-4 text-xs">
<img
src="img/<?php echo htmlspecialchars($post['img']); ?>"
alt="<?php echo htmlspecialchars($post['img']); ?>"
class="object-cover" />
</div>
<div class="flex items-center gap-x-2 text-xs m-2">
<time datetime="2020-03-16" class="text-gray-500"><?= htmlspecialchars($post['updated_at']); ?></time>
</div>
<div class="group relative m-2">
<h3 class=" text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
<a href="article.php?id=<?= $post['id'] ?>"><span class="absolute inset-0"></span><?= htmlspecialchars($post['title']); ?></a>
</h3>
<p class="m-2 line-clamp-3 text-sm/6 text-gray-600">
<?= htmlspecialchars($post['excerpt']) ?>
</p>
</div>
<div class="relative m-2 flex items-center gap-x-2">
<div class="text-sm/6">
<p class="font-semibold text-gray-900">
<?php if (!empty($post['url'])): ?><a href="<?= $post['url'] ?>" class="text-blue-500"><i class="fas fa-link"></i></a><?php endif; ?>
<?php if (!empty($post['instagram'])): ?><a href="<?= $post['ins'] ?>" class="text-pink-500"><i class="fab fa-instagram"></i></a><?php endif; ?>
<?php if (!empty($post['facebook'])): ?><a href="<?= $post['face'] ?>" class="text-blue-700"><i class="fab fa-facebook"></i></a><?php endif; ?>
<?php if (!empty($post['youtube'])): ?><a data-fancybox="gallery" href="<?= $post['youtube'] ?>" class="text-red-600"><i class="fab fa-youtube"></i></a><?php endif; ?>
</p>
<p class="text-gray-600"><?php
$postId = $post['id'];
$result = $conn->query("SELECT e.id, e.name FROM etiquetas e INNER JOIN post_etiquetas pe ON e.id = pe.etiqueta_id WHERE pe.post_id = $postId");
while ($etiqueta = $result->fetch_assoc()): ?>
<a href="tailwind4_datatables_postslar11.php?action=filterByTag&tag_id=<?= $etiqueta['id'] ?>"
class="bg-green-100 text-green-800 px-2 py-1 rounded"><?= htmlspecialchars($etiqueta['name']) ?></a>
<?php endwhile; ?>
</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- Paginació -->
<nav class="flex items-center justify-center space-x-2 mt-6">
<?php if ($currentPage > 1): ?>
<a href="?<?= http_build_query(array_merge($_GET, ['page' => $currentPage - 1])) ?>"
class="py-2 px-3 border text-gray-800 hover:bg-gray-100">Anterior</a>
<?php endif; ?>
<?php for ($i = 1; $i <= $totalPages; $i++): ?>
<a href="?<?= http_build_query(array_merge($_GET, ['page' => $i])) ?>"
class="py-2 px-3 <?= ($i == $currentPage) ? 'bg-blue-500 text-white' : 'text-gray-800 hover:bg-gray-100' ?>">
<?= $i ?>
</a>
<?php endfor; ?>
<?php if ($currentPage < $totalPages): ?>
<a href="?<?= http_build_query(array_merge($_GET, ['page' => $currentPage + 1])) ?>"
class="py-2 px-3 border text-gray-800 hover:bg-gray-100">Següent</a>
<?php endif; ?>
</nav>
</div>
</div>
</div>
<!-- principi Contenidor Principal DATATABLES-->
<!--Container-->
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-2 sm:py-6">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-6 pb-4 text-center lg:pt-6">
<h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-5xl">Llista de posts<!-- --> <span class="relative whitespace-nowrap text-blue-600"><svg aria-hidden="true" viewBox="0 0 418 42" class="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70" preserveAspectRatio="none">
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path>
</svg><span class="relative">tailwind-4</span></span> <!-- -->totalment responsive.</h1>
<p class="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">Most bookkeeping software is accurate, but hard to use. We make the opposite trade-off, and hope you don’t get audited.</p>
<div class="mt-10 flex justify-center gap-x-6"><a class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900" variant="solid" color="slate" href="/register">Get 6 months free</a><a class="group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-hidden ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300" variant="outline" color="slate" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><svg aria-hidden="true" class="h-3 w-3 flex-none fill-blue-600 group-active:fill-current">
<path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z"></path>
</svg><span class="ml-3">Watch video</span></a></div>
</div>
<!--Card-->
<div id='recipients' class="p-8 mt-6 lg:mt-0 rounded shadow bg-white">
<?php
$servername = "localhost";
$username = "joan";
$password = "queMm88/g62123";
$dbname = "postslar11";
// Crear connexió segura
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connexió fallida: " . $conn->connect_error);
}
// Consulta SQL per obtenir els posts ordenats per updated_at DESC
$sql = "SELECT id,
title,
LEFT(excerpt, 50) AS excerpt_short,
url, ins, face, youtube
FROM posts
ORDER BY updated_at DESC";
$result = $conn->query($sql);
?>
<!-- Taula Datatables -->
<table id="example" class="stripe hover" style="width:100%; padding-top: 1em; padding-bottom: 1em;">
<thead>
<tr>
<th data-priority="1">ID</th>
<th data-priority="2">Títol</th>
<th data-priority="3">Descripció</th>
<th data-priority="4">Web</th>
<th data-priority="5">Ins</th>
<th data-priority="6">Face</th>
<th data-priority="7">YouTube</th>
</tr>
</thead>
<tbody>
<?php while ($row = $result->fetch_assoc()) : ?>
<tr>
<td><?= $row['id']; ?></td>
<td>
<a href="article.php?id=<?= $post['id'] ?>"
class="block w-full py-2 px-3 text-blue-600 dark:text-blue-400 hover:underline"
title="<?= htmlspecialchars($row['title']); ?>"
aria-label="<?= htmlspecialchars($row['title']); ?>">
<?= htmlspecialchars($row['title']); ?>
</a>
</td>
<td><?= htmlspecialchars_decode($row['excerpt_short']); ?>...</td>
<td>
<?php if (!empty($row['url'])): ?>
<a href="<?= htmlspecialchars($row['url']); ?>" target="_blank" class="text-blue-600 hover:text-blue-800">
<i class="fas fa-globe"></i>
</a>
<?php endif; ?>
</td>
<td>
<?php if (!empty($row['ins'])): ?>
<a href="<?= htmlspecialchars($row['ins']); ?>" target="_blank" class="text-pink-500 hover:text-pink-700">
<i class="fab fa-instagram"></i>
</a>
<?php endif; ?>
</td>
<td>
<?php if (!empty($row['face'])): ?>
<a href="<?= htmlspecialchars($row['face']); ?>" target="_blank" class="text-blue-600 hover:text-blue-800">
<i class="fab fa-facebook"></i>
</a>
<?php endif; ?>
</td>
<td>
<?php if (!empty($row['youtube'])): ?>
<a data-fancybox="gallery" href="<?= htmlspecialchars($row['youtube']); ?>" target="_blank" class="text-red-500 hover:text-red-700">
<i class="fab fa-youtube"></i>
</a>
<?php endif; ?>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
<!--/Card-->
</div>
<!--/container-->
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--Datatables -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true
})
.columns.adjust()
.responsive.recalc();
});
</script>
<?php
$conn->close();
?>
<!-- final Contenidor Principal DATATABLES-->
</body>
</html>
No valid image directory found or the category is not valid for the gallery.
