Paginatore in tabella figlio in Tabella Parent/Child

[diego966]

Buongiorno come da titolo, vorrei esporvi il mio problema, e magari qualcuno potrà darmi una mano.
ho una tabella del tipo Parent/Child, dove la tabella padre mi restituisce corretamente i risultati dei dipendenti, li ho creato il paginatore che funziona bene, restituisce 5 record per pagina e la casella di ricerca, funziona bene anch'essa, la tabella figlio mi restituisce tutti i badge relativi al dipendente selezionato attraverso il click su icona awesome, quindi la tabella figlio si espande e e mostra tutti i badge relativi al dipendente, nel file php che estrapola i dati da query e li passa all'ajax c'è una funzione che mi fa il conteggio dei badge e mi scorpora i badge rilasciati come ex novo e quelli rilasciati come duplicati che il dipendente ha avuto rilasciati nel tempo, ed il totale complessivo degli ex novo e duplicati, restituendomi una stringa con una dicitura che mi viene visualizzata nella tabella figlio con un div creato in js ma che non è stato creato nel DOM, quindi è dinamico come la tabella, in tutto questo cercavo di creare un paginatore, nel php faccio restituire un massimo di 5 record per pagina, per cui se un dipendente ha un numero di badge inferiori o pari a 5 mi restituisce solo una pagina, viceversa il paginatore calcola il numero di pagine e mi visualizza un numero di pulsanti tanti quanto sono le pagine, compreso di pulsante precedente-successivo-inizio-fine, ora le ho provato tutte dal div posizionato nel DOM sotto la tabella figlio, al tfoot della tabella figlio, ma niente il paginatore non viene visualizzato, all'espansione della tabella figlio i record restituiti sono 5, o meno, quando sono più di 5 visualizza solo i primi 5 ma ovviamente non avendo il paginatore non posso scorrerli, ho anche validato il json resituito dalla query e mi riporta tutto, numero di pagina corrente, totale delle pagine, totale record totale nuovi badge, totale duplicati, totale complessivo e il dettaglio complessivo cn nome cognome del dipendente e data odierna,
insomma mi riporta tutto ma io non riesco a farlo visualizzare sto maledetto paginatore, posto tutti i codici dall'htm al js e al php così da riuscire a farvi un quadro completo , e sperando che qualcuno possa aiutarmi a capire come fare.
Vi ringrazio, buona Domenica.

inizio con il json restituito:

{    "data": [        {            "idbadge": 3092,            "iddip": 7,            "nbadge": "000289",            "nfc": "0090000816440",            "richiesto": "02/10/2019",            "rilascio": "02/10/2019",            "causale": "RILASCIO NFC",            "rilascioper": "DUPLICATO",            "foto": "SI"        },        {            "idbadge": 7,            "iddip": 7,            "nbadge": "000289",            "nfc": "0000000000000",            "richiesto": "02/01/2015",            "rilascio": "02/01/2015",            "causale": "ASSUNZIONE",            "rilascioper": "NUOVO BADGE",            "foto": "NO"        }    ],    "pagina": 1,    "totalPages": 1,    "totalRecords": 2,    "total_nuovi_badge": 1,    "total_duplicati": 1,    "total_badge": 2,    "dettaglioBadge": "Al dipendente XXXXXXX XXXXXX, alla data del 21/04/2024, sono stati rilasciati N° 1 Badge Ex Novo - N° 1 Badge Duplicati - per un totale di N° 2 Badge."}

[diego966]

il php

<?php
require_once('connessione.php');

header('Content-Type: application/json');

try {
$iddip = isset($_POST['iddip']) ? $_POST['iddip'] : 0;
$pagina = isset($_POST['pagina']) ? (int)$_POST['pagina'] : 1;
$badgePerPage = isset($_POST['badgePerPage']) ? (int)$_POST['badgePerPage'] : 5;
$offset = ($pagina - 1) * $badgePerPage;

$fetchdata = ['data' => []];
$total_nuovi_badge = 0;
$total_duplicati = 0;

// Query per ottenere nome e cognome del dipendente
$infoQuery = "SELECT cognome, nome FROM dipendente WHERE iddip = :iddip";
$infoStmt = $pdo->prepare($infoQuery);
$infoStmt->bindParam(':iddip', $iddip, PDO::PARAM_INT);
$infoStmt->execute();
$info = $infoStmt->fetch(PDO::FETCH_ASSOC);

// Query per i dettagli dei badge con paginazione
$detailQuery = "SELECT
                        badge.idbadge, 
                        badge.iddip, 
                        badge.nbadge, 
                        badge.nfc, 
DATE_FORMAT(badge.drichiesta,'%d/%m/%Y') AS richiesto, 
DATE_FORMAT(badge.drilascio,'%d/%m/%Y') AS rilascio, 
                        badge.causale, 
                        badge.rilascioper, 
                        badge.foto
FROM badge
WHERE badge.iddip = :iddip
ORDER BY badge.drilascio desc
LIMIT :limit OFFSET :offset";
$statement = $pdo->prepare($detailQuery);
$statement->bindParam(':iddip', $iddip, PDO::PARAM_INT);
$statement->bindParam(':limit', $badgePerPage, PDO::PARAM_INT);
$statement->bindParam(':offset', $offset, PDO::PARAM_INT);
$statement->execute();

while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
$fetchdata['data'][] = $row;
    }

// Query per il conteggio totale dei badge per la paginazione
$totalQuery = "SELECTCOUNT(*) AS total FROM badge WHERE iddip = :iddip";
$totalStmt = $pdo->prepare($totalQuery);
$totalStmt->bindParam(':iddip', $iddip, PDO::PARAM_INT);
$totalStmt->execute();
$totalResult = $totalStmt->fetch(PDO::FETCH_ASSOC);
$totalRecords = $totalResult['total'];

 

[diego966]

// Query per il conteggio dei nuovi badge e duplicati
$countQuery = "SELECT
                       rilascioper, COUNT(*) AS count
FROM badge
WHERE iddip = :iddip
GROUP BY rilascioper";
$countStatement = $pdo->prepare($countQuery);
$countStatement->bindParam(':iddip', $iddip, PDO::PARAM_INT);
$countStatement->execute();

while ($countRow = $countStatement->fetch(PDO::FETCH_ASSOC)) {
if ($countRow['rilascioper'] === 'NUOVO BADGE') {
$total_nuovi_badge = $countRow['count'];
        } elseif ($countRow['rilascioper'] === 'DUPLICATO') {
$total_duplicati = $countRow['count'];
        }
    }


$total_badge = $total_nuovi_badge + $total_duplicati;
$nomeCompleto = "{$info['cognome']} {$info['nome']}";
$dataOdierna = date('d/m/Y');
$dettaglioBadge = "Al dipendente $nomeCompleto, alla data del $dataOdierna, sono stati rilasciati N° $total_nuovi_badge Badge Ex Novo - N° $total_duplicati Badge Duplicati - per un totale di N° $total_badge Badge.";


echojson_encode([
'data' => $fetchdata['data'],
'pagina' => $pagina,
'totalPages' => ceil($totalRecords / $badgePerPage),
'totalRecords' => $totalRecords,
'total_nuovi_badge' => $total_nuovi_badge,
'total_duplicati' => $total_duplicati,
'total_badge' => $total_badge,
'dettaglioBadge' => $dettaglioBadge
    ], JSON_UNESCAPED_UNICODE);
} catch (PDOException$e) {
error_log("Errore durante l'esecuzione della query: ".$e->getMessage());
echojson_encode(['error' => 'Si è verificato un errore nel server.'], JSON_UNESCAPED_UNICODE);
}
?>

[diego966]

// Dichiarazione e inizializzazione delle variabili per la paginazione

const recordsPerPage = 5; // Numero di record per pagina
let currentPage = 1; // Pagina corrente iniziale

// Funzione per recuperare i dati della pagina dal server
 function fetchPage(page, search = "") {
  const params = new URLSearchParams();
  params.append("page", page);
  params.append("search", search); // Aggiunto per supportare la ricerca
  params.append("recordsPerPage", recordsPerPage);

  //inizializzazione tabella dipendenti e caricamento dati dinamici in tabella

  fetch("../php/dipend.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: params,
  })
    .then((response) => response.json())
    .then((data) => {
      const tbody = document
        .getElementById("tableDipendenti")
        .getElementsByTagName("tbody")[0];
      tbody.innerHTML = ""; // Pulisci la tbody prima di aggiungere nuove righe

      data.data.forEach((row) => {
        const tr = document.createElement("tr");
        tr.setAttribute('data-id', row.iddip);  // Assicurati che ogni riga abbia un data-id
        tr.innerHTML = `
            <td class="icon-cell"><i class="fa fa-arrow-circle-o-right fa-2x" aria-hidden="true" onclick="toggleBadgeDetails(event, this.parentElement.parentElement.getAttribute('data-id'))"></i></td>
            <td class="dip-data-cell">${row.matr}</td>
            <td class="dip-data-cell">${row.cognome}</td>
            <td class="dip-data-cell">${row.nome}</td>
            <td class="dip-data-cell">${row.nascita}</td>
            <td class="dip-data-cell">${row.matrcomune}</td>
            <td class="dip-data-cell">${row.assunzione}</td>
            <td class="dip-data-cell">${row.iniznomin}</td>
            <td class="dip-data-cell"><img src="${row.foto}" style="height:50px; width:50px;"></td>
            <td class="dip-data-cell">${row.stato}</td>
            <td class="hidden-id">${row.totbadge}</td>
        `;
        tr.addEventListener("click", function () {
          const idDipendente = row.iddip;
          // Mostra l'ID del dipendente in un alert
          alert("ID del dipendente cliccato: " + idDipendente);
        });

        tbody.appendChild(tr);
      });
      updatePagination(data.totalPages, currentPage);
    })
    .catch((error) => {
      console.error("Errore di rete:", error);
    });
}

[diego966]

// Seleziona tutte le righe della tabella padre
const rows = document.querySelectorAll("#parentTable tbody tr");

// Funzione per aggiornare il paginatore
function updatePagination(totalPages, currentPage) {
  const container = document.getElementById("pagination");
  container.innerHTML = ""; // Pulisci la paginazione esistente

  // Pulsante "Inizio"
  const startButton = createPageButton("Inizio", 1);
  startButton.disabled = currentPage === 1; // Disabilita se sei alla prima pagina
  container.appendChild(startButton);

  // Pulsante "Precedente"
  const prevButton = createPageButton("Precedente", currentPage - 1);
  prevButton.disabled = currentPage === 1; // Disabilita se sei alla prima pagina
  container.appendChild(prevButton);

  // Pulsanti numerici
  for (
    let i = Math.max(1, currentPage - 2);
    i <= Math.min(totalPages, currentPage + 2);
    i++
  ) {
    const numButton = createPageButton(i, i);
    numButton.disabled = i === currentPage; // Disabilita il pulsante della pagina corrente
    container.appendChild(numButton);
  }

  // Pulsante "Successivo"
  const nextButton = createPageButton("Successivo", currentPage + 1);
  nextButton.disabled = currentPage === totalPages; // Disabilita se sei all'ultima pagina
  container.appendChild(nextButton);

  // Pulsante "Fine"
  const endButton = createPageButton("Fine", totalPages);
  endButton.disabled = currentPage === totalPages; // Disabilita se sei all'ultima pagina
  container.appendChild(endButton);
}

// Funzione per creare un pulsante di pagina
function createPageButton(text, page) {
  const button = document.createElement("button");
  button.textContent = text;
  button.addEventListener("click", () => {
    fetchPage(page);
    currentPage = page; // Aggiorna la pagina corrente
  });
  return button;
}

// Chiamata iniziale per recuperare la prima pagina dei dati
fetchPage(currentPage);

// Gestore dell'input di ricerca
document.getElementById("searchInput").addEventListener("input", function () {
  const searchValue = this.value;
  fetchPage(1, searchValue); // Chiama fetchPage con il valore di ricerca
  currentPage = 1; // Reset della pagina corrente a 1 dopo una ricerca

  // Gestore del click del pulsante di ricerca
  document
    .getElementById("resetButton")
    .addEventListener("click", function () {
      const searchValue = document.getElementById("searchInput").value;
      fetchPage(1, searchValue); // Chiama fetchPage con il valore di ricerca
      currentPage = 1; // Reset della pagina corrente a 1 dopo una ricerca
      document.getElementById("searchInput").value = ""; // Pulisce il campo di input della ricerca
    });


});

[diego966]

//---------------------------------------------------------------------------------------------------------------------------------
// si inizializza il collapse per la tabella dei badge

// Funzione per espandere/collassare i dettagli del badge

function toggleBadgeDetails(event, idDipendente) {
  event.stopPropagation(); // Previene la propagazione dell'evento

  const icon = event.target; // 'icon' definita correttamente qui come l'elemento su cui si è cliccato.
  const tr = icon.closest('tr');
  const dipId = tr.getAttribute('data-id');

  const isExpanded = icon.classList.contains("fa-arrow-circle-o-down"); // Controlla se l'icona indica che i dettagli sono attualmente espansi.
  icon.classList.toggle("fa-arrow-circle-o-right"); // Alterna tra indicare un dettaglio non espanso
  icon.classList.toggle("fa-arrow-circle-o-down"); // e un dettaglio espanso.

  const detailsRowId = "details-row-" + dipId;
  let detailsRow = document.getElementById(detailsRowId);
  if (!detailsRow) {
      detailsRow = document.createElement("tr");
      detailsRow.id = detailsRowId;
      detailsRow.innerHTML = `<td colspan="11"><div id='details-content-${dipId}' class='details-content'>Caricamento...</div></td>`;
      tr.parentNode.insertBefore(detailsRow, tr.nextSibling);
      fetchBadgeDetails(dipId, detailsRowId);
  } else {
      const detailsContent = document.getElementById(`details-content-${dipId}`);
      detailsContent.parentNode.parentNode.style.display = isExpanded ? "none" : "table-row";
  }
}

[diego966]

function fetchBadgeDetails(idDipendente, detailsRowId) {
  fetch("../php/countbdgpag.php", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: `iddip=${idDipendente}`,
  })
    .then((response) => response.json())
    .then((data) => {
      const detailsContent = document.getElementById(
        `details-content-${idDipendente}`
      );
      let badgesHTML = `<table class="badge-details">

              <thead>
                  <tr>
                      <th class="hidden-id">ID BADGE</th>
                      <th class="hidden-id">ID DIPENDENTE</th>
                      <th>BADGE N°</th>
                      <th>NFC</th>
                      <th>RICHIESTO IL</th>
                      <th>RILASCIATO IL</th>
                      <th>CAUSALE</th>
                      <th>RILASCIO COME</th>
                      <th>FOTO</th>
                  </tr>
              </thead>

              <tbody>`;

              data.data.forEach((badge) => {
              badgesHTML += `<tr onclick="alert('ID Badge cliccato: ${badge.idbadge}')">
                    <td class="hidden-id">${badge.idbadge}</td>
                    <td class="hidden-id">${badge.iddip}</td>
                    <td>${badge.nbadge}</td>
                    <td>${badge.nfc}</td>
                    <td>${badge.richiesto}</td>
                    <td>${badge.rilascio}</td>
                    <td>${badge.causale}</td>
                    <td>${badge.rilascioper}</td>
                    <td>${badge.foto}</td>
              </tr>`;
      });

          badgesHTML += `</tbody></table>`;
          badgesHTML += `<div>${data.dettaglioBadge}</div>`; // Aggiungi il dettaglio dei conteggi dei badge
          detailsContent.innerHTML = badgesHTML; // Inserisce i dettagli dei badge nel contenitore appropriato
    })
    .catch((error) => {
      console.error(
        "Errore durante il caricamento dei dettagli dei badge:",
        error
      );    
      detailsContent.innerHTML = "Errore nel caricamento dei dati.";
    });
}

[diego966]

// PAGINATORE BADGE

function updateBadgePagination(totalPages, currentPage, idDipendente) {
  const pagination = document.getElementById('badgePagination');
  pagination.innerHTML = ""; // Pulizia della paginazione
  console.log(`Creating pagination for ${totalPages} pages, current page: ${currentPage}`);

  // Pulsante per andare alla prima pagina
  const firstPageBtn = document.createElement('button');
  firstPageBtn.textContent = "Inizio";
  firstPageBtn.onclick = () => fetchBadgeDetails(idDipendente, 1);
  firstPageBtn.disabled = currentPage === 1;
  pagination.appendChild(firstPageBtn);

  // Pulsante per andare alla pagina precedente
  const prevPageBtn = document.createElement('button');
  prevPageBtn.textContent = "Precedente";
  prevPageBtn.onclick = () => fetchBadgeDetails(idDipendente, currentPage - 1);
  prevPageBtn.disabled = currentPage === 1;
  pagination.appendChild(prevPageBtn);

  // Pulsanti per le pagine numerate
  for (let i = 1; i <= totalPages; i++) {
      let pageBtn = document.createElement('button');
      pageBtn.textContent = i;
      pageBtn.onclick = () => fetchBadgeDetails(idDipendente, i);
      pageBtn.disabled = i === currentPage;
      pagination.appendChild(pageBtn);
  }

  console.log(`Creating pagination for ${totalPages} pages, current page: ${currentPage}`);


  // Pulsante per andare alla pagina successiva
  const nextPageBtn = document.createElement('button');
  nextPageBtn.textContent = "Successivo";
  nextPageBtn.onclick = () => fetchBadgeDetails(idDipendente, currentPage + 1);
  nextPageBtn.disabled = currentPage === totalPages;
  pagination.appendChild(nextPageBtn);

  // Pulsante per andare all'ultima pagina
  const lastPageBtn = document.createElement('button');
  lastPageBtn.textContent = "Fine";
  lastPageBtn.onclick = () => fetchBadgeDetails(idDipendente, totalPages);
  lastPageBtn.disabled = currentPage === totalPages;
  pagination.appendChild(lastPageBtn);
}

[diego966]

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard Dipendenti</title>
    <link rel="icon" href="../img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/stile.css">
</head>

<body>
    <h1>Elenco Dipendenti</h1>

    <!-- Contenitore principale per la ricerca, tabella e paginazione -->
    <div id="mainContainer">

        <div id="mainTableContainer">

            <div id="dipendentiContainer">

                <div id="search-box">
                    <input type="text" id="searchInput" placeholder="Cerca dipendente...">
                    <button id="resetButton" class="hide">&times;</button> <!-- Pulsante per cancellare la ricerca -->
                </div> <!-- Div per la casella di ricerca -->


                <table id="tableDipendenti" class="display" style="width:100%">
                    <thead>
                        <tr class="header-row">
                            <th class="first-table"></th>
                            <th class="first-table">MATRICOLA:</th>
                            <th class="first-table">COGNOME:</th>
                            <th class="first-table">NOME:</th>
                            <th class="first-table">DATA DI NASCITA:</th>
                            <th class="first-table">CODICE SISPI:</th>
                            <th class="first-table">DATA DI ASSUNZIONE:</th>
                            <th class="first-table">INTESTAZIONE BADGE:</th>
                            <th class="first-table">FOTO:</th>
                            <th class="first-table">STATO:</th>
                            <th class="hidden-id">TOTALE BADGE:</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Dati tabella -->
                    </tbody>
                </table>
                <div id="pagination" class="pagination"></div>
            </div>

            <div id="badgeTableContainer" style="display: none;">
                <table id="badgeTable">
                    <thead>
                        <!-- Intestazioni tabella badge -->
                    </thead>
                    <tbody>
                        <!-- Dati tabella badge -->
                    </tbody>

                    <tfoot>
                        <tr>
                            <td colspan="9">
                                <div id="badgePagination" class="pagination">
                                    <!-- Qui verranno aggiunti i bottoni di paginazione via JavaScript -->
                                </div>
                            </td>
                        </tr>
                    </tfoot>

                </table>


            </div>
        </div>

    </div>

    <scriptsrc="../js/popolatab.js"></script>
</body>

</html>

[diego966]

tabella.png