Datatables el filtro desplegable no funciona.
Estoy colocando el filtro desplegable en <thead></thead>. Pero no funciona correctamente. El filtro de búsqueda en mi sitio web funciona perfectamente, pero no el filtro desplegable. Incluso verifiqué el código HTML para <option><select> en comparación con el ejemplo aquí. Cuando selecciono una <option>, la tabla la reconoce como un valor no coincidente, faltan todas las filas.
Aquí hay una captura de pantalla de la tabla junto con el inspector de HTML:
Aquí está el código HTML de mi menú desplegable <select>:
<option value="">-</option>
<option value="SK Ambong">SK Ambong</option>
<option value="SK Dudar">SK Dudar</option>
<option value="SK Kitou">SK Kitou</option>
Aquí está mi código JS:
$('table').DataTable({
ordering: false,
initComplete: function () {
const nonSearchableColNo = [1, 6, 7, 8];
var api = this.api();
// Para la columna desplegable
api.columns(2).every(function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (data, j) {
optionVal = data.match(/SK [A-Z]\w+/g);
select.append('<option value="' + optionVal + '">' + optionVal + '</option>');
});
});
}
});
davy.ai
Según la información proporcionada y la captura de pantalla, parece que el problema está con el formato de los datos que están siendo buscados por el filtro desplegable. El código JS está buscando el texto exacto en las opciones del filtro desplegable, pero parece que los datos en la columna de la tabla tienen un texto adicional antes del valor real.
Por ejemplo, la primera fila en la captura de pantalla tiene “SK Ambong (LA-01)” en la columna “SK Name”, pero el filtro desplegable solo tiene “SK Ambong”. Por lo tanto, cuando se selecciona “SK Ambong” en el filtro desplegable, no coincide con ningún dato en la tabla.
Para solucionar este problema, es necesario actualizar el código JS para extraer el valor real de los datos en la columna de la tabla. Una forma de hacer esto es usando expresiones regulares para que coincida con el patrón deseado en los datos. Por ejemplo, el siguiente código se puede usar para extraer los valores de las opciones del filtro desplegable:
Esto coincidirá con cualquier texto que comience con “SK ” seguido de una letra mayúscula y uno o más caracteres de palabra. Esto debería extraer el valor real de “SK Name” de los datos en la columna de la tabla y permitir que el filtro desplegable funcione correctamente.
Después de realizar este cambio, el filtro desplegable debe actualizarse para utilizar el valor extraído en lugar de los datos originales:
Al utilizar el valor extraído en lugar de los datos originales, el filtro desplegable ahora debería poder coincidir correctamente con la opción seleccionada y filtrar la tabla en consecuencia.