Answers

• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  August 2023

  You will probably need to use the code from this FixedHeader example.

  Kevin
• JuanAlberto Posts: 14Questions: 4Answers: 0

  August 2023 edited August 2023

  Este es el Archivo que carga el DataTable:

  //Script.js
  let dataTable;
  let dataTableIsInitialized = false;
  let data;
  const initDataTable = () => {
    console.log("Initializing DataTable...");
    dataTable = $('#example').DataTable(dataTableOptions); 
    console.log("DataTable Initialized");  
   loadChart2Script();//Para cargar chart2.js
    loadChart1Script(); //Para cargar chart1.js
   return dataTable;
  };
  
  const loadJsonDataToDataTable = (jsonData) => {
    if (!jsonData || jsonData.length === 0) {
      return;
    }
   dataTable.clear().draw();
  // Agregar los registros al DataTable iterando por cada objeto en jsonData.
    jsonData.forEach((data) => {
      // Verificar si la columna Almacén está vacía.
     if (data[9] !== "") {
      // Convertir el objeto de datos a un array con las columnas seleccionadas en el orden deseado.
      const rowData = [
              data.Almc,
              data.Articulo,
              data.Descripcion,
              data.Stock,
              data.InvAsigTotal,
              data.Reserva,
              data.Transito,
              data.CntOrd,
              data.CntAsig,
              data.CntPick,
              data.FaltPick
      ]
  // Convertir el array a formato JSON con comillas dobles y luego analizarlo para asegurar el formato JSON válido.
      const jsonString = JSON.stringify(rowData);
      const jsonDataParsed = JSON.parse(jsonString);
      
      // Agregar el objeto jsonDataParsed directamente como una nueva fila al DataTable.
      dataTable.row.add(jsonDataParsed).draw();
   }
    });
    updateBarChart(dataTable)
  };
  
  document.getElementById("fileUpload").addEventListener("change", function (event) {
    // Obtener el archivo seleccionado del input file.
    const selectedFile = event.target.files[0];
  
    // Verificar si se seleccionó un archivo.
    if (selectedFile) {
      // Crear un nuevo objeto FileReader.
      var fileReader = new FileReader();
  
      // Definir la función de callback para cuando el archivo se haya leído completamente.
      fileReader.onload = function (event) {
        // Obtener los datos del archivo leído como una cadena binaria.
        var data = event.target.result;
        
        // Leer el archivo como un libro de Excel usando la biblioteca XLSX.
        var workbook = XLSX.read(data, { type: "binary" });
  
        var jsonData = [];
  
        // Iterar a través de cada hoja del libro de Excel.
        workbook.SheetNames.forEach(sheet => {
          // Convertir la hoja actual a un array de objetos JSON y agregarlo a jsonData usando el operador spread (...)
          var rowObject = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
          jsonData.push(...rowObject);
        });
   loadJsonDataToDataTable(jsonData);
        loadChart2Script();
        loadChart1Script();
      };
  
      // Leer el archivo seleccionado como una cadena binaria para poder procesarlo con la biblioteca XLSX.
      fileReader.readAsBinaryString(selectedFile);
    }
  });
  function getDataTable() {
    return dataTable;
  }
  
  // Función para cargar el archivo chart2.js y ejecutar el código cuando esté listo
  function loadChart2Script() {
    const chart2Script = document.createElement('script');
    chart2Script.src = 'chart2.js';
    chart2Script.onload = function () {
        // Cuando chart2.js se haya cargado, ejecutar updateBarChart
        updateBarChart(dataTable);
    };
    document.body.appendChild(chart2Script);
  }
  function loadChart1Script() {
    const chart1Script = document.createElement('script');
    chart1Script.src = 'chart1.js';
    chart1Script.onload = function () {
      updateBarChart1(dataTable); // Llama a la función para actualizar el gráfico desde chart1.js
    };
    document.body.appendChild(chart1Script);
  }
  // Función para actualizar el gráfico después de cambios en el DataTable
  function updateChartAfterDataTableChange() {
    updateBarChart(dataTable);  // *con esta linea cargo el Grafico despues de 5 dias*
    updateBarChart1(dataTable)(); // Llama a la función para actualizar el gráfico desde chart1.js
  }
  // Ejecutar la función initDataTable al cargar la página para inicializar el DataTable.
  window.addEventListener('load', () => {
   initDataTable();
  });
  

  Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  August 2023

  If you need help debugging the code you posted then please provide a link to a test case showing the issue and steps to replicate the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin