feat(backoffice): DataTables cliente-only nas 11 listagens com CSV

Fecha o item 6.9 da auditoria (sem server-side/AJAX — todas as tabelas
estão bem abaixo de 60 linhas): ordenação, pesquisa, paginação, pt-PT
e Responsive (colapso em ecrãs estreitos), reaproveitando o botão
"Exportar CSV" já existente.

DataTables 2.3.4 + Responsive 3.0.6 vendorizados em
assets/vendor/datatables-2.3.4/ (mesma versão/decisão do hub.andmore.pt),
nunca de CDN. Tradução pt-PT oficial inline em assets/js/datatables-init.js,
que expõe initDataTable(selector, opts) — cada página dá um id estável à
tabela e marca a coluna de Ações como orderable:false/searchable:false.
Os vendor scripts só carregam nas 10 páginas que os usam (injeção dinâmica
depois do DOMContentLoaded, como o loader do Summernote), não no
header/footer partilhado.

views/admin/trials/index.php ficou de fora de propósito: cada linha tem
um <select> de estado e um <textarea> de notas editados in-line antes de
"Guardar" — um redraw da DataTable a meio dessa edição (ordenar, paginar)
arrisca perder ou baralhar o que ainda não foi submetido.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Sonnet 5 committed 2026-09-26 10:34:09 +01:00
1 parent 4222b8f2e0
commit b1e88781b8
18 files changed
+342 -12

No files matched your search

+23 -1
View File
@@ -35,6 +35,8 @@ $badge = [
$page_title = 'Eventos';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 mb-0">Eventos</h1>
@@ -46,7 +48,7 @@ include __DIR__ . '/../../../includes/header.php';
<div class="card shadow-sm"><div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="eventsTable">
<thead class="table-light"><tr>
<th>Evento</th><th>Estado</th><th>Janela de publicação</th><th class="text-center">Leads</th><th style="width:160px">Ações</th>
</tr></thead>
@@ -93,4 +95,24 @@ include __DIR__ . '/../../../includes/header.php';
</div>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#eventsTable', { columnDefs: [{ targets: 4, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+23 -1
View File
@@ -38,6 +38,8 @@ if (isset($_GET['csv'])) {
$page_title = 'Galerias';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 mb-0">Galerias</h1>
@@ -57,7 +59,7 @@ include __DIR__ . '/../../../includes/header.php';
<div class="card shadow-sm"><div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="galeriasTable">
<thead class="table-light"><tr>
<th>Nome</th><th style="width:120px">Ações</th>
</tr></thead>
@@ -79,4 +81,24 @@ include __DIR__ . '/../../../includes/header.php';
</div>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#galeriasTable', { columnDefs: [{ targets: 1, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+23 -1
View File
@@ -30,6 +30,8 @@ $editing = admin_gym_id();
$page_title = 'Ginásios';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
<h1 class="h3 mb-0">Ginásios</h1>
@@ -43,7 +45,7 @@ include __DIR__ . '/../../../includes/header.php';
<div class="card shadow-sm"><div class="card-body p-0">
<form method="POST" class="mb-0"><?= csrf_field() ?>
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="gymsTable">
<thead class="table-light"><tr>
<th>Ginásio</th><th>Endereço</th><th>Estado</th><th>Secções</th><th style="width:150px">Ações</th>
</tr></thead>
@@ -80,4 +82,24 @@ include __DIR__ . '/../../../includes/header.php';
</form>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#gymsTable', { columnDefs: [{ targets: 4, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+25 -2
View File
@@ -25,7 +25,10 @@ if (isset($_GET['csv'])) {
$page_title = 'Horário de Aulas';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<?php
$dias = ['segunda'=>'Segunda','terça'=>'Terça','quarta'=>'Quarta','quinta'=>'Quinta','sexta'=>'Sexta','sábado'=>'Sábado','domingo'=>'Domingo'];
?>
<div class="container">
@@ -41,7 +44,7 @@ $dias = ['segunda'=>'Segunda','terça'=>'Terça','quarta'=>'Quarta','quinta'=>'Q
<div class="card shadow-sm"><div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="horarioTable">
<thead class="table-light"><tr>
<th>Modalidade</th><th>Dia</th><th>Início</th><th>Fim</th><th>Sala</th><th style="width:120px">Ações</th>
</tr></thead>
@@ -70,4 +73,24 @@ $dias = ['segunda'=>'Segunda','terça'=>'Terça','quarta'=>'Quarta','quinta'=>'Q
</div>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#horarioTable', { columnDefs: [{ targets: 5, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+23 -1
View File
@@ -31,6 +31,8 @@ $new_leads = db_membership_leads_count_new($pdo);
$page_title = 'Mensalidades';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
<h1 class="h3 mb-0">Mensalidades</h1>
@@ -46,7 +48,7 @@ include __DIR__ . '/../../../includes/header.php';
<div class="card shadow-sm"><div class="card-body p-0">
<form method="POST" class="mb-0"><?= csrf_field() ?>
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="membershipsTable">
<thead class="table-light"><tr>
<th>Nome</th><th>Preço</th><th>Estado</th><th>Ordem</th><th style="width:120px">Ações</th>
</tr></thead>
@@ -79,4 +81,24 @@ include __DIR__ . '/../../../includes/header.php';
</form>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#membershipsTable', { columnDefs: [{ targets: 4, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+23 -1
View File
@@ -37,6 +37,8 @@ if (isset($_GET['csv'])) {
$page_title = 'Modalidades';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 mb-0">Modalidades</h1>
@@ -56,7 +58,7 @@ include __DIR__ . '/../../../includes/header.php';
<div class="card shadow-sm"><div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="modalidadesTable">
<thead class="table-light"><tr>
<th>Ícone</th><th>Nome</th><th>Cor</th><th>Ordem</th><th style="width:120px">Ações</th>
</tr></thead>
@@ -85,4 +87,24 @@ include __DIR__ . '/../../../includes/header.php';
</div>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#modalidadesTable', { columnDefs: [{ targets: 4, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+23 -1
View File
@@ -45,6 +45,8 @@ $requests = db_rgpd_requests_list($pdo);
$page_title = 'Pedidos RGPD';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-3">
<h1 class="h3 mb-0">Pedidos RGPD</h1>
@@ -53,7 +55,7 @@ include __DIR__ . '/../../../includes/header.php';
<div class="card shadow-sm"><div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="rgpdTable">
<thead class="table-light"><tr>
<th>Data</th><th>E-mail</th><th>Pedido</th><th>Mensagem</th><th>Estado</th><th style="width:230px">Ações</th>
</tr></thead>
@@ -84,4 +86,24 @@ include __DIR__ . '/../../../includes/header.php';
</div>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#rgpdTable', { columnDefs: [{ targets: 5, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+23 -1
View File
@@ -35,6 +35,8 @@ if (isset($_GET['csv'])) {
$page_title = 'Equipa';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 mb-0">Equipa</h1>
@@ -54,7 +56,7 @@ include __DIR__ . '/../../../includes/header.php';
<div class="card shadow-sm"><div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="teamTable">
<thead class="table-light"><tr>
<th style="width:60px">Foto</th><th>Nome</th><th>Área</th><th>Estado</th><th style="width:120px">Ações</th>
</tr></thead>
@@ -84,4 +86,24 @@ include __DIR__ . '/../../../includes/header.php';
</div>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#teamTable', { columnDefs: [{ targets: 4, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+23 -1
View File
@@ -41,6 +41,8 @@ if (isset($_GET['csv'])) {
$page_title = 'Lixeira';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-2">
<h1 class="h3 mb-0">Lixeira</h1>
@@ -56,7 +58,7 @@ include __DIR__ . '/../../../includes/header.php';
<div class="card shadow-sm"><div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="trashTable">
<thead class="table-light"><tr>
<th>Tipo</th><th>Registo</th><th>Apagado em</th><th>Por</th><th class="text-end">Ações</th>
</tr></thead>
@@ -100,4 +102,24 @@ include __DIR__ . '/../../../includes/header.php';
</div>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#trashTable', { columnDefs: [{ targets: 4, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';
+25 -2
View File
@@ -25,7 +25,10 @@ if (isset($_GET['csv'])) {
$page_title = 'Horário de Funcionamento';
include __DIR__ . '/../../../includes/header.php';
?>
<?= link_tag('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.css') ?>
<?= link_tag('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.css') ?>
<?php
$dias = ['segunda'=>'Segunda','terça'=>'Terça','quarta'=>'Quarta','quinta'=>'Quinta','sexta'=>'Sexta','sabado'=>'Sábado','domingo'=>'Domingo','feriados'=>'Feriados'];
?>
<div class="container">
@@ -39,7 +42,7 @@ $dias = ['segunda'=>'Segunda','terça'=>'Terça','quarta'=>'Quarta','quinta'=>'Q
<div class="card shadow-sm"><div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<table class="table table-hover align-middle mb-0" id="workHoursTable">
<thead class="table-light"><tr>
<th>Dia</th><th>Abertura</th><th>Fecho</th><th style="width:120px">Ações</th>
</tr></thead>
@@ -63,4 +66,24 @@ $dias = ['segunda'=>'Segunda','terça'=>'Terça','quarta'=>'Quarta','quinta'=>'Q
</div>
</div></div>
</div>
<script>
window.DT_SRC = [
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/dataTables.responsive.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/vendor/datatables-2.3.4/responsive.bootstrap5.min.js')) ?>,
<?= json_encode(_asset_versioned('assets/js/datatables-init.js')) ?>
];
document.addEventListener('DOMContentLoaded', function () {
(function next(i) {
if (i >= window.DT_SRC.length) {
return initDataTable('#workHoursTable', { columnDefs: [{ targets: 3, orderable: false, searchable: false }] });
}
var s = document.createElement('script');
s.src = window.DT_SRC[i];
s.onload = function () { next(i + 1); };
document.body.appendChild(s);
})(0);
});
</script>
<?php include __DIR__ . '/../../../includes/footer.php';