0
335
ViewsEl filtro desplegable <thead> de tablas de datos no funciona
Estoy poniendo el filtro desplegable en <thead></thead> . Pero no puede funcionar correctamente. El filtro de búsqueda en mi sitio web funciona perfectamente, pero no el filtro desplegable. Incluso revisé 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 html:
Aquí está mi código html 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(); // For dropdown column 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 [AZ]\w+/g); select.append( '<option value="'+optionVal+'">'+optionVal+'</option>' ) } ); } ); } });1 answers
Answer question0
La documentación de datatables.net (y su código) coincide con la cadena completa , por lo que sería "SK Dudar 1", pero obtiene SK+[palabra], por ejemplo, "SK Dudar" (como también se muestra en su <option> ).
"^SK Dudar$" no coincide con "SK Dudar 1" , por lo que no obtiene coincidencias.
Cambio
optionVal = data.match(/SK [AZ]\w+/g);a
optionVal = data;para verificar que el resto funcione, pero es posible que no funcione con lo que parece una imagen adicional (no se proporcionan datos html/datatables, por lo que no puedo estar seguro)
O cambiar
column.search(val ? '^'+val+'$' :...a
column.search(val ? '^'+val : ''... (es decir, eliminar el $ )
Dependiendo de qué más haya en esa columna de datos, es posible que deba cambiar su expresión regular de búsqueda, por ejemplo
column.search(val ? '^'+val+'\s.?\w' : ''...también debe hacer coincidir "SK Dudar" con "SK Dudar 1", pero no con "SK Dudar 1 2".
Es posible que deba mover la imagen a una columna diferente si no funciona, pero no coincide en HTML, sino en la column.search . API de búsqueda de tablas de datos.