Búsqueda inteligente por columna en DataTable

JuanAlberto

Estoy haciendo un filtrado o búsqueda inteligente en cada una de en todas las 11 columnas de un DataTable, el código implementado solo esta dando como resultado que cuando digito cualquier carácter en cualquiera de las 11 columnas de inmediato se borran todos los registros del DataTable, y si quito el cursor del input ya no vuelven esos registros. No se si el problema sea por librerías que faltan actualizar o netamente de código. Las librerías con las que he trabajado el código son:
<link rel="" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.dataTables.min.css"> y

Los registros son cargados dinámicamente al DataTable desde un archivo Excel. Este es el código que estoy trabajando en el filtrado o búsqueda inteligente:

$(document).ready(function(){
// Inicializamos el DataTable con las opciones especificadas
var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true
});

  //Creamos una fila en el head de la tabla y lo clonamos para cada columna
  $('#example thead tr').clone(true).appendTo( '#example thead' );
  // Iteramos por cada celda (th) en la segunda fila (índice 1) del encabezado
  $('#example thead tr:eq(1) th').each( function (i) {
      var title = $(this).text(); //Obtenemos el nombre de la columna
      // Reemplazamos el contenido de la celda con un control de búsqueda (input) con el título 
      //de la columna como marcador de posición (placeholder)
      $(this).html( '<input type="text" placeholder="Search...'+title+'" />' );
      // Agregamos un evento a los controles de búsqueda para que se dispare cuando el usuario escriba o cambie el valor
      $( 'input', this ).on( 'keyup change', function () {
          // Si el valor del control de búsqueda es diferente al valor de búsqueda actual de la columna
          if ( table.column(i).search() !== this.value ) {
              table
                  .column(i)
                  .search( this.value )
                  .draw();
          }
      } );
  } );   

});

kthorngren

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

Kevin

JuanAlberto

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

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