Answers

• Diego1966 Posts: 20Questions: 4Answers: 0

  March 29

  sorry, I sent the wrong image
• allan Posts: 63,489Questions: 1Answers: 10,470 Site admin

  March 29 Answer ✓

  Possibly the draw event is what you want, but that will trigger for every draw of the host table. You could check in it if anything that needs to cause a reset has changed - search() and page.info() for example.

  Allan
• allan Posts: 63,489Questions: 1Answers: 10,470 Site admin

  March 29 Answer ✓

  There are other events such as search and length, etc which might be useful, but I think draw is probably the catch all that you want.

  Allan
• Diego1966 Posts: 20Questions: 4Answers: 0

  March 29

  @allan, thank you very much
• Diego1966 Posts: 20Questions: 4Answers: 0

  March 29

  unfortunately the methods you suggested don't work, or I'm probably wrong, I tried the three methods but it blocks the child, it doesn't return any value even at the start.
  I don't know what to do, and it's important that I find the solution!
• Diego1966 Posts: 20Questions: 4Answers: 0

  March 29 edited March 29

  This is the Js

  $(document).ready(function () {
      //initialization of employee table
      let table = $('#example').DataTable({
          "ajax": {
              "url": "../php/dipendente.php",
              "dataSrc": "data"
          },
          "order": [[1, 'asc']],
          "language": {
              "url": "../json/italiano.json"
          },
          "columnDefs": [
              {
                  "targets": [0], // Index of the column to hide (0 for the first column)
                  "visible": false, // Set column visibility to false
                  "searchable": false// Prevents searching on the column
              }
          ]
      });
  
      // IInitializing the badge table
      let badgeTable = $('#mytable').DataTable({
          columns: [
              {data: 'idbadge'},
              {data: 'iddip'},
              {data: 'nbadge'},
              {data: 'strmagn'},
              {data: 'nfc'},
              {data: 'richiesto'},
              {data: 'rilascio'},
              {data: 'causale'},
              {data: 'rilascioper'},
              {data: 'foto'}
          ],
          "order": [[1, 'asc']],
          "language": {
              "url": "//cdn.datatables.net/plug-ins/2.0.3/i18n/it-IT.json"
          },
          "columnDefs": [
              {
                  "targets": [0], // Indices of the columns to hide (0 for idbadge, 1 for iddip)
                  "visible": false, //Set column visibility to falseo
                  "searchable": false // Prevents searching on hidden columns
              }
          ]
      });
  
      // Handling the search.dt event on the main table
      table.on('search.dt', function () {
          badgeTable.clear().draw(); // Clears the badge table when a search is performed
      });
  
   // Handle the page.dt event on the main table
      table.on('page.dt', function () {
          badgeTable.clear().draw(); // Clear the badge table when changing pages
  
      // Management of clicking on a row of the employee table
      $('#example tbody').on('click', 'tr', function () {
          var data = table.row(this).data();
          var iddip = data[0]; //takes the employee ID to be in the first column
         // AJAX call to get the badges associated with the selected employee
          $.ajax({
              url: "../php/badge.php",
              type: 'GET',
              dataType: 'json',
              data: {
                  iddip: iddip
              },
              success: function (response) {
                  // Add the new data to the badge table
                  badgeTable.rows.add(response.data).draw();
              },
              error: function (xhr, status, error) {
                // Error handling
                  console.error(xhr.responseText);
              }
          });
      });
  });
  
  

  Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,489Questions: 1Answers: 10,470 Site admin

  March 29 Answer ✓

  I'm not sure what you mean by "blocks the child". Perhaps you can link to a test page showing the issue, so I can help, please.

  Allan
• Diego1966 Posts: 20Questions: 4Answers: 0

  March 29

  I meant that the methods I tried, lock the lower table and does not load the data on click in the upper table
• kthorngren Posts: 21,319Questions: 26Answers: 4,948

  March 30 edited March 30 Answer ✓

  Looks liek you have a syntax error:

   // Handle the page.dt event on the main table
      table.on('page.dt', function () {
          badgeTable.clear().draw(); // Clear the badge table when changing pages
  

  You are missing the closing });. Could be a copy and paste error but it should look like this:

   // Handle the page.dt event on the main table
      table.on('page.dt', function () {
          badgeTable.clear().draw(); // Clear the badge table when changing pages
      });
  

  I copied your code here with a couple changes and it works:
  https://live.datatables.net/releyaki/1/edit

  If you still have issues take a look at the browser's console for errors. To help debug we will need to see the issue. Please post a link to a test case replicating the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• Diego1966 Posts: 20Questions: 4Answers: 0

  March 30

  Hi Kevin, thank you for your interest, after reading the user manual, the A.P.I. , the methods, and the events, in the end I got there, you have to be patient, I'm a neophyte and I really want to learn because I really like programming, I'll post the code I wrote, the only difference is that I positioned the two events : "search dt" and "page dt" at the end of the script.

  Thank you again, happy Easter
  Diego

  the code:

  $(document).ready(function () {
  // Inizializzazione della tabella dei dipendenti
  let table = $('#example').DataTable({
  "ajax": {
  "url": "../php/dipendente.php",
  "dataSrc": "data"
  },
  "order": [[1, 'asc']],
  "language": {
  "url": "../json/italiano.json"
  },
  "columnDefs": [
  {
  "targets": [0, 1], // Indice della colonna da nascondere (0 per la prima colonna)
  "visible": false, // Imposta la visibilità della colonna su falso
  "searchable": false // Impedisce la ricerca sulla colonna
  }
  ]
  });

  // Inizializzazione della tabella dei badge
  let badgeTable = null;
  
  // Gestione del click su una riga della tabella dei dipendenti
  $('#example tbody').on('click', 'tr', function () {
      var data = table.row(this).data();
      var iddip = data[0]; // Assume che l'ID del dipendente sia nella prima colonna
  
      // Se la tabella dei badge esiste già, distruggila
      if (badgeTable) {
          badgeTable.destroy();
      }
  
      // Chiamata AJAX per ottenere i badge associati al dipendente selezionato
      $.ajax({
          url: "../php/badge.php",
          type: 'GET',
          dataType: 'json',
          data: {
              iddip: iddip
          },
          success: function (response) {
              // Inizializzazione della nuova tabella dei badge
              badgeTable = $('#tabella-badge').DataTable({
                  data: response.data,
                  columns: [
                      {data: 'idbadge'},
                      {data: 'iddip'},
                      {data: 'nbadge'},
                      {data: 'strmagn'},
                      {data: 'nfc'},
                      {data: 'richiesto'},
                      {data: 'rilascio'},
                      {data: 'causale'},
                      {data: 'rilascioper'},
                      {data: 'foto'}
                  ],
                  "searching": false, // Disabilita la casella di ricerca nella tabella badge
                  "order": [[1, 'asc']],
                  "language": {
                      "url": "//cdn.datatables.net/plug-ins/2.0.3/i18n/it-IT.json"
                  },
                  "columnDefs": [
                      {
                          "targets": [0, 1], // Indici delle colonne da nascondere (0 per idbadge, 1 per iddip)
                          "visible": false // Imposta la visibilità delle colonne su falso
                      }
                  ]
              });
          },
          error: function (xhr, status, error) {
              // Gestione degli errori
              console.error(xhr.responseText);
          }
      });
  });
  
  // Gestione dell'evento di ricerca nella tabella principale
  table.on('search.dt', function () {
      if (badgeTable) {
          badgeTable.clear().draw();
      }
  });
  
  // Gestione degli eventi di paginazione nella tabella principale
  table.on('page.dt', function () {
      if (badgeTable) {
          badgeTable.clear().draw();
      }
  });
  

  });
• kthorngren Posts: 21,319Questions: 26Answers: 4,948

  March 30 Answer ✓

  Do you have this working?

  Kevin
• Diego1966 Posts: 20Questions: 4Answers: 0

  March 30

  yes yes...it works perfectly, thank you very much