Visor de Hojas en un html

4 views
Skip to first unread message

Freddy Moreno

unread,
May 15, 2025, 10:51:43 AMMay 15
to Apps Script en Español
Quiero realizar una especie de visor de mi archivo de google sheet Donde tengo varias hojas que puede variar en cantidad de hojas y en cantidad de filas, las columnas siempres seran las mismas 


Codigo
Cuenta
Fecha
Referencia
Descripcion
Monto
213005013
IVA POR PAGAR
31/01/2025
7 13 1000004192
OrdP.Eg.B,1000004192/IMPUESTO SOBRE LA RENTA PERSONAS NATURALES
5.000,00
213005013
IVA POR PAGAR
28/02/2025
37 319 1000004521
OrdP.Eg.B,1000004521/IVA 1ERA QNA FEB
36.904,31
213005013
IVA POR PAGAR
31/03/2025
10 356 1000004743
OrdP.Eg,IVA 2DA Q MARZO 2025
(45.941,19)

Mediante un dropdown obtener las hojas y una vez seleccionada me muestre los datos en un datatable 

Tengo un error en el codigo que no me actualiza el datatable una vez que selecciono la hoja 

Su ayuda como podria corregir y que error 
Aqui mi codigo
Code.gs 
// Replace with your Google Sheet ID
const SPREADSHEET_ID = '1idUD_fCmdjEq_XyN-8-IKLx5vBmynoS8kBchZ2S6CuI'; // Your Spreadsheet ID

/**
 * Serves the HTML file.
 */
function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
      .setTitle('Visor de Hojas de Google Sheet');
}

/**
 * Gets the names of all sheets in the spreadsheet.
 * @returns {string[]} An array of sheet names.
 */
function getSheetNames() {
  console.log("getSheetNames: Iniciando...");
  try {
    const spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheets = spreadsheet.getSheets();
    const sheetNames = sheets.map(sheet => sheet.getName());
    console.log("getSheetNames: Nombres de hojas obtenidos:", sheetNames);
    return sheetNames;
  } catch (e) {
    console.error("getSheetNames: Error al obtener nombres de hojas:", e);
    // Propaga el error para que el cliente lo maneje
    throw new Error("Error al obtener nombres de hojas: " + e.message);
  } finally {
    console.log("getSheetNames: Finalizado.");
  }
}

/**
 * Gets all data from a specific sheet.
 * Assumes the first row is the header.
 * @param {string} sheetName The name of the sheet to retrieve data from.
 * @returns {object} An object containing headers and data, or an error message.
 */
function getSheetData(sheetName) {
  console.log(`getSheetData: Iniciando para la hoja "${sheetName}"...`);
  try {
    const spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
    console.log(`getSheetData: Spreadsheet abierta con ID ${SPREADSHEET_ID}.`);

    const sheet = spreadsheet.getSheetByName(sheetName);
    console.log(`getSheetData: Intentando obtener la hoja por nombre "${sheetName}".`);

    if (!sheet) {
      console.error(`getSheetData: Hoja "${sheetName}" no encontrada.`);
      return { success: false, message: `Hoja "${sheetName}" no encontrada.` };
    }
    console.log(`getSheetData: Hoja "${sheetName}" encontrada.`);

    const range = sheet.getDataRange();
    console.log(`getSheetData: Rango de datos obtenido.`);

    const values = range.getValues();
    console.log(`getSheetData: Valores obtenidos. Filas: ${values.length}`);

    if (values.length === 0) {
      console.log(`getSheetData: Hoja "${sheetName}" está vacía. No hay datos.`);
      return { success: true, headers: [], data: [] }; // Return empty headers and data for empty sheet
    }

    const headers = values[0]; // Assume the first row is the header
    const data = values.slice(1); // Get data from the second row onwards
    console.log(`getSheetData: Encabezados: ${headers.length}. Filas de datos: ${data.length}.`);

    console.log(`getSheetData: Datos obtenidos correctamente para "${sheetName}".`);
    return { success: true, headers: headers, data: data };

  } catch (e) {
    console.error(`getSheetData: Error al obtener datos de la hoja "${sheetName}":`, e);
    // Devuelve un objeto de error con un mensaje detallado
    return { success: false, message: "Error interno del servidor al obtener datos: " + e.message };
  } finally {
    console.log(`getSheetData: Finalizado para la hoja "${sheetName}".`);
  }
}
// Replace with your Google Sheet ID
const SPREADSHEET_ID = '1idUD_fCmdjEq_XyN-8-IKLx5vBmynoS8kBchZ2S6CuI'; // Your Spreadsheet ID

/**
 * Serves the HTML file.
 */
function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
      .setTitle('Visor de Hojas de Google Sheet');
}

/**
 * Gets the names of all sheets in the spreadsheet.
 * @returns {string[]} An array of sheet names.
 */
function getSheetNames() {
  console.log("getSheetNames: Iniciando...");
  try {
    const spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheets = spreadsheet.getSheets();
    const sheetNames = sheets.map(sheet => sheet.getName());
    console.log("getSheetNames: Nombres de hojas obtenidos:", sheetNames);
    return sheetNames;
  } catch (e) {
    console.error("getSheetNames: Error al obtener nombres de hojas:", e);
    // Propaga el error para que el cliente lo maneje
    throw new Error("Error al obtener nombres de hojas: " + e.message);
  } finally {
    console.log("getSheetNames: Finalizado.");
  }
}

/**
 * Gets all data from a specific sheet.
 * Assumes the first row is the header.
 * @param {string} sheetName The name of the sheet to retrieve data from.
 * @returns {object} An object containing headers and data, or an error message.
 */
function getSheetData(sheetName) {
  console.log(`getSheetData: Iniciando para la hoja "${sheetName}"...`);
  try {
    const spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
    console.log(`getSheetData: Spreadsheet abierta con ID ${SPREADSHEET_ID}.`);

    const sheet = spreadsheet.getSheetByName(sheetName);
    console.log(`getSheetData: Intentando obtener la hoja por nombre "${sheetName}".`);

    if (!sheet) {
      console.error(`getSheetData: Hoja "${sheetName}" no encontrada.`);
      return { success: false, message: `Hoja "${sheetName}" no encontrada.` };
    }
    console.log(`getSheetData: Hoja "${sheetName}" encontrada.`);

    const range = sheet.getDataRange();
    console.log(`getSheetData: Rango de datos obtenido.`);

    const values = range.getValues();
    console.log(`getSheetData: Valores obtenidos. Filas: ${values.length}`);

    if (values.length === 0) {
      console.log(`getSheetData: Hoja "${sheetName}" está vacía. No hay datos.`);
      return { success: true, headers: [], data: [] }; // Return empty headers and data for empty sheet
    }

    const headers = values[0]; // Assume the first row is the header
    const data = values.slice(1); // Get data from the second row onwards
    console.log(`getSheetData: Encabezados: ${headers.length}. Filas de datos: ${data.length}.`);

    console.log(`getSheetData: Datos obtenidos correctamente para "${sheetName}".`);
    return { success: true, headers: headers, data: data };

  } catch (e) {
    console.error(`getSheetData: Error al obtener datos de la hoja "${sheetName}":`, e);
    // Devuelve un objeto de error con un mensaje detallado
    return { success: false, message: "Error interno del servidor al obtener datos: " + e.message };
  } finally {
    console.log(`getSheetData: Finalizado para la hoja "${sheetName}".`);
  }
} en el HTML
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <title>Visor de Hojas de Google Sheet con DataTables</title>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <!-- DataTables CSS and JS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css" />
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
  <!-- Include a recent jQuery version again for good measure, sometimes needed -->

  <style>
    body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
    .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 25px; }
    h1, h2 { color: #333; }
    label { display: block; margin-bottom: 8px; font-weight: bold; }
    select { padding: 10px; font-size: 1em; width: 100%; max-width: 400px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; }
    #status, #dataStatus { color: #555; font-style: italic; margin-top: 10px; padding: 8px; border-radius: 4px; }
    #status.success, #dataStatus.success { background-color: #e6ffed; border-left: 3px solid #4caf50; }
    #status.error, #dataStatus.error { background-color: #ffebee; border-left: 3px solid #f44336; }
    #status.loading, #dataStatus.loading { background-color: #e3f2fd; border-left: 3px solid #2196f3; }
    #sheetDataTable { width: 100% !important; }
    /* DataTables custom styling for better appearance */
    .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0.3em 0.8em; }
    .dataTables_wrapper .dataTables_filter input { margin-left: 0.5em; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
    .dataTables_wrapper .dataTables_length select { padding: 6px; border: 1px solid #ccc; border-radius: 4px; width: auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Selecciona una Hoja del Archivo</h1>

    <label for="sheetSelector">Hojas Disponibles:</label>
    <select id="sheetSelector" disabled>
      <option value="">Cargando hojas...</option>
    </select>
    <p id="status">Inicializando...</p>
  </div>

  <div class="container">
    <h2>Datos de la Hoja Seleccionada:</h2>
    <div id="dataTableContainer"></div>
    <p id="dataStatus">Selecciona una hoja del desplegable de arriba para ver sus datos.</p>
  </div>

  <script>
    let dataTableInstance = null; // Variable to hold the DataTables instance

    // Function to update status messages
    function updateStatus(elementId, message, type = 'info') {
      const el = document.getElementById(elementId);
      if (el) {
        el.textContent = message;
        el.className = type; // Add class for styling (success, error, loading)
      }
      console.log(`Status [${elementId} - ${type}]: ${message}`); // Log status to console
    }

    // Function to load sheet names from Google Sheet
    function loadSheetNames() {
      updateStatus('status', 'Solicitando nombres de hojas...', 'loading');
      google.script.run
        .withSuccessHandler(populateDropdown)
        .withFailureHandler(function(error) {
          console.error('Error al cargar nombres de hojas:', error);
          updateStatus('status', 'Error al cargar hojas: ' + error.message, 'error');
        })
        .getSheetNames();
    }

function populateDropdown(sheetNames) {
  console.log("populateDropdown: Recibidos nombres de hojas:", sheetNames);
  const selectElement = document.getElementById('sheetSelector');
  selectElement.innerHTML = ''; // Clear existing options

  if (sheetNames && sheetNames.length > 0) {
    const defaultOption = document.createElement('option');
    defaultOption.value = "";
    defaultOption.textContent = "--- Selecciona una hoja ---";
    selectElement.appendChild(defaultOption);

    sheetNames.forEach(function(name) {
      const option = document.createElement('option');
      option.value = name; // Use the sheet name as the value
      option.textContent = name;
      selectElement.appendChild(option);
    });
    updateStatus('status', 'Hojas cargadas correctamente. Selecciona una.', 'success');
    selectElement.disabled = false;

    // Load the first sheet automatically if there are sheets
    // COMENTAR ESTO TEMPORALMENTE:
    // if (sheetNames.length > 0) {
    //    fetchSheetData(sheetNames[0]);
    // }

  } else {
    const option = document.createElement('option');
    option.value = "";
    option.textContent = "No se encontraron hojas.";
    selectElement.appendChild(option);
    selectElement.disabled = true;
    updateStatus('status', 'No se pudo cargar la lista de hojas.', 'error');
  }
}

    // Function to handle failure in loading sheet names (more robust error handling)
    function onSheetNamesFailure(error) {
      console.error('Error al cargar nombres de hojas:', error);
      const selectElement = document.getElementById('sheetSelector');
      selectElement.innerHTML = '<option value="">Error al cargar hojas</option>';
      selectElement.disabled = true;
      updateStatus('status', 'Error crítico al cargar nombres de hojas: ' + error.message, 'error');
    }


// Function to fetch data for a selected sheet
function fetchSheetData(sheetName) {
  updateStatus('dataStatus', `Cargando datos de "${sheetName}"...`, 'loading');

  // Add this console.log to see the value being passed
  console.log(`fetchSheetData: Llamando a getSheetData con sheetName: "${sheetName}"`);

  google.script.run
    .withSuccessHandler(function(response) {
      console.log("Respuesta recibida:", response); // Add this log to see the response
      if (response && response.success) {
        if (response.data.length === 0) {
          updateStatus('dataStatus', `La hoja "${sheetName}" está vacía.`, 'info');
          clearDataTable();
        } else {
          initializeDataTable(response.headers, response.data, sheetName);
        }
      } else {
        updateStatus('dataStatus', 'Error: ' + (response ? response.message : 'Respuesta no válida'), 'error');
        clearDataTable();
      }
    })
    .withFailureHandler(function(error) {
      console.error('Error al cargar datos:', error);
      updateStatus('dataStatus', 'Error al cargar datos: ' + error.message, 'error');
      clearDataTable();
    })
    .getSheetData(sheetName);
}

    // Function to clear and destroy the existing DataTables instance
    function clearDataTable() {
      if (dataTableInstance) {
        try {
          dataTableInstance.destroy();
        } catch(e) {
          console.log("Error al destruir DataTable:", e);
        }
        dataTableInstance = null;
      }
      $('#dataTableContainer').empty(); // Clear the container div
    }

    // Function to initialize DataTables
    function initializeDataTable(headers, tableData, sheetName) {
      console.log("Headers:", headers);
      console.log("Datos:", tableData);

      clearDataTable(); // Clear any existing table

      // Ensure headers are valid
      if (!headers || headers.length === 0) {
        updateStatus('dataStatus', "No se pudieron determinar encabezados.", 'error');
        return;
      }

      // Create the table element
      $('#dataTableContainer').html('<table id="sheetDataTable" class="display compact hover stripe" style="width:100%;"></table>');

      try {
        dataTableInstance = $('#sheetDataTable').DataTable({
          data: tableData,
          columns: headers.map((h, i) => ({
              title: String(h !== null && h !== undefined ? h : "Columna " + (i + 1)), // Handle null/undefined headers
              defaultContent: "" // Ensure empty cells display as empty
          })),
          responsive: true,
          pageLength: 10,
          lengthMenu: [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"] ],
          language: {
              // Your Spanish language configuration for DataTables
              "decimal": "",
              "emptyTable": "No hay datos disponibles en la tabla",
              "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
              "infoEmpty": "Mostrando 0 a 0 de 0 entradas",
              "infoFiltered": "(filtrado de _MAX_ entradas totales)",
              "infoPostFix": "",
              "thousands": ",",
              "lengthMenu": "Mostrar _MENU_ entradas",
              "loadingRecords": "Cargando...",
              "processing": "Procesando...",
              "search": "Buscar:",
              "zeroRecords": "No se encontraron registros coincidentes",
              "paginate": {
                  "first": "Primero",
                  "last": "Último",
                  "next": "Siguiente",
                  "previous": "Anterior"
              },
              "aria": {
                  "sortAscending": ": activar para ordenar la columna ascendentemente",
                  "sortDescending": ": activar para ordenar la columna descendentemente"
              }
          }
        });

        updateStatus('dataStatus', `Mostrando ${tableData.length} filas de "${sheetName}"`, 'success');
      } catch (e) {
        console.error('Error al inicializar DataTable:', e);
        updateStatus('dataStatus', 'Error al inicializar DataTable: ' + e.message, 'error');
      }
    }


    // Event listener for dropdown change
    document.getElementById('sheetSelector').addEventListener('change', function() {
      const sheetName = this.value;
      console.log("Hoja seleccionada:", sheetName); // Verify the selected sheet name
      if (sheetName) {
        fetchSheetData(sheetName);
      } else {
        clearDataTable();
        updateStatus('dataStatus', 'Seleccione una hoja para ver los datos.', 'info');
      }
    });

    // Load sheet names when the page loads
    window.addEventListener('load', function() {
      loadSheetNames();
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <title>Visor de Hojas de Google Sheet con DataTables</title>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <!-- DataTables CSS and JS -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css" />
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
  <!-- Include a recent jQuery version again for good measure, sometimes needed -->

  <style>
    body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
    .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 25px; }
    h1, h2 { color: #333; }
    label { display: block; margin-bottom: 8px; font-weight: bold; }
    select { padding: 10px; font-size: 1em; width: 100%; max-width: 400px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; }
    #status, #dataStatus { color: #555; font-style: italic; margin-top: 10px; padding: 8px; border-radius: 4px; }
    #status.success, #dataStatus.success { background-color: #e6ffed; border-left: 3px solid #4caf50; }
    #status.error, #dataStatus.error { background-color: #ffebee; border-left: 3px solid #f44336; }
    #status.loading, #dataStatus.loading { background-color: #e3f2fd; border-left: 3px solid #2196f3; }
    #sheetDataTable { width: 100% !important; }
    /* DataTables custom styling for better appearance */
    .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0.3em 0.8em; }
    .dataTables_wrapper .dataTables_filter input { margin-left: 0.5em; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
    .dataTables_wrapper .dataTables_length select { padding: 6px; border: 1px solid #ccc; border-radius: 4px; width: auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>Selecciona una Hoja del Archivo</h1>

    <label for="sheetSelector">Hojas Disponibles:</label>
    <select id="sheetSelector" disabled>
      <option value="">Cargando hojas...</option>
    </select>
    <p id="status">Inicializando...</p>
  </div>

  <div class="container">
    <h2>Datos de la Hoja Seleccionada:</h2>
    <div id="dataTableContainer"></div>
    <p id="dataStatus">Selecciona una hoja del desplegable de arriba para ver sus datos.</p>
  </div>

  <script>
    let dataTableInstance = null; // Variable to hold the DataTables instance

    // Function to update status messages
    function updateStatus(elementId, message, type = 'info') {
      const el = document.getElementById(elementId);
      if (el) {
        el.textContent = message;
        el.className = type; // Add class for styling (success, error, loading)
      }
      console.log(`Status [${elementId} - ${type}]: ${message}`); // Log status to console
    }

    // Function to load sheet names from Google Sheet
    function loadSheetNames() {
      updateStatus('status', 'Solicitando nombres de hojas...', 'loading');
      google.script.run
        .withSuccessHandler(populateDropdown)
        .withFailureHandler(function(error) {
          console.error('Error al cargar nombres de hojas:', error);
          updateStatus('status', 'Error al cargar hojas: ' + error.message, 'error');
        })
        .getSheetNames();
    }

function populateDropdown(sheetNames) {
  console.log("populateDropdown: Recibidos nombres de hojas:", sheetNames);
  const selectElement = document.getElementById('sheetSelector');
  selectElement.innerHTML = ''; // Clear existing options

  if (sheetNames && sheetNames.length > 0) {
    const defaultOption = document.createElement('option');
    defaultOption.value = "";
    defaultOption.textContent = "--- Selecciona una hoja ---";
    selectElement.appendChild(defaultOption);

    sheetNames.forEach(function(name) {
      const option = document.createElement('option');
      option.value = name; // Use the sheet name as the value
      option.textContent = name;
      selectElement.appendChild(option);
    });
    updateStatus('status', 'Hojas cargadas correctamente. Selecciona una.', 'success');
    selectElement.disabled = false;

    // Load the first sheet automatically if there are sheets
    // COMENTAR ESTO TEMPORALMENTE:
    // if (sheetNames.length > 0) {
    //    fetchSheetData(sheetNames[0]);
    // }

  } else {
    const option = document.createElement('option');
    option.value = "";
    option.textContent = "No se encontraron hojas.";
    selectElement.appendChild(option);
    selectElement.disabled = true;
    updateStatus('status', 'No se pudo cargar la lista de hojas.', 'error');
  }
}

    // Function to handle failure in loading sheet names (more robust error handling)
    function onSheetNamesFailure(error) {
      console.error('Error al cargar nombres de hojas:', error);
      const selectElement = document.getElementById('sheetSelector');
      selectElement.innerHTML = '<option value="">Error al cargar hojas</option>';
      selectElement.disabled = true;
      updateStatus('status', 'Error crítico al cargar nombres de hojas: ' + error.message, 'error');
    }


// Function to fetch data for a selected sheet
function fetchSheetData(sheetName) {
  updateStatus('dataStatus', `Cargando datos de "${sheetName}"...`, 'loading');

  // Add this console.log to see the value being passed
  console.log(`fetchSheetData: Llamando a getSheetData con sheetName: "${sheetName}"`);

  google.script.run
    .withSuccessHandler(function(response) {
      console.log("Respuesta recibida:", response); // Add this log to see the response
      if (response && response.success) {
        if (response.data.length === 0) {
          updateStatus('dataStatus', `La hoja "${sheetName}" está vacía.`, 'info');
          clearDataTable();
        } else {
          initializeDataTable(response.headers, response.data, sheetName);
        }
      } else {
        updateStatus('dataStatus', 'Error: ' + (response ? response.message : 'Respuesta no válida'), 'error');
        clearDataTable();
      }
    })
    .withFailureHandler(function(error) {
      console.error('Error al cargar datos:', error);
      updateStatus('dataStatus', 'Error al cargar datos: ' + error.message, 'error');
      clearDataTable();
    })
    .getSheetData(sheetName);
}

    // Function to clear and destroy the existing DataTables instance
    function clearDataTable() {
      if (dataTableInstance) {
        try {
          dataTableInstance.destroy();
        } catch(e) {
          console.log("Error al destruir DataTable:", e);
        }
        dataTableInstance = null;
      }
      $('#dataTableContainer').empty(); // Clear the container div
    }

    // Function to initialize DataTables
    function initializeDataTable(headers, tableData, sheetName) {
      console.log("Headers:", headers);
      console.log("Datos:", tableData);

      clearDataTable(); // Clear any existing table

      // Ensure headers are valid
      if (!headers || headers.length === 0) {
        updateStatus('dataStatus', "No se pudieron determinar encabezados.", 'error');
        return;
      }

      // Create the table element
      $('#dataTableContainer').html('<table id="sheetDataTable" class="display compact hover stripe" style="width:100%;"></table>');

      try {
        dataTableInstance = $('#sheetDataTable').DataTable({
          data: tableData,
          columns: headers.map((h, i) => ({
              title: String(h !== null && h !== undefined ? h : "Columna " + (i + 1)), // Handle null/undefined headers
              defaultContent: "" // Ensure empty cells display as empty
          })),
          responsive: true,
          pageLength: 10,
          lengthMenu: [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"] ],
          language: {
              // Your Spanish language configuration for DataTables
              "decimal": "",
              "emptyTable": "No hay datos disponibles en la tabla",
              "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
              "infoEmpty": "Mostrando 0 a 0 de 0 entradas",
              "infoFiltered": "(filtrado de _MAX_ entradas totales)",
              "infoPostFix": "",
              "thousands": ",",
              "lengthMenu": "Mostrar _MENU_ entradas",
              "loadingRecords": "Cargando...",
              "processing": "Procesando...",
              "search": "Buscar:",
              "zeroRecords": "No se encontraron registros coincidentes",
              "paginate": {
                  "first": "Primero",
                  "last": "Último",
                  "next": "Siguiente",
                  "previous": "Anterior"
              },
              "aria": {
                  "sortAscending": ": activar para ordenar la columna ascendentemente",
                  "sortDescending": ": activar para ordenar la columna descendentemente"
              }
          }
        });

        updateStatus('dataStatus', `Mostrando ${tableData.length} filas de "${sheetName}"`, 'success');
      } catch (e) {
        console.error('Error al inicializar DataTable:', e);
        updateStatus('dataStatus', 'Error al inicializar DataTable: ' + e.message, 'error');
      }
    }


    // Event listener for dropdown change
    document.getElementById('sheetSelector').addEventListener('change', function() {
      const sheetName = this.value;
      console.log("Hoja seleccionada:", sheetName); // Verify the selected sheet name
      if (sheetName) {
        fetchSheetData(sheetName);
      } else {
        clearDataTable();
        updateStatus('dataStatus', 'Seleccione una hoja para ver los datos.', 'info');
      }
    });

    // Load sheet names when the page loads
    window.addEventListener('load', function() {
      loadSheetNames();
    });
  </script>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages