0

Tengo una tabla la cual quiero filtrar con selects personalizados en alguna de las columnas (no todas). No encuentro la manera de que al desplegar el select me salgan los valores exclusivos que yo quiero que busque sino que me salen todos los valores en el desplegable. Por otro lado, uno de los selects me gustaría que fuese un calendario personalizado, es decir, facturas de Abril 2018... mayo 2018 y no que me despliegue todas las fechas que hay con los dias meses y años. Tengo el siguiente script:

<script>
    $(document).ready(function() {
        $('#example').DataTable( {
            initComplete: function () {
                this.api().columns([2, 3, 8]).every( function (i) {
                    if (i == 2)
                    {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).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 ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    }
                    else if (i == 3)
                    {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).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 ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    }
                    else if (i == 8)
                    {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.footer()).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 ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    }
                } );
            }
        } );
    } );
    </script>

1 respuesta 1

0

La parte que agrega el select es:

column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>');
      });

donde d es cada valor de cada celda, si quieres poner tu selección personalizada, tines que hacer los append() con los valores que tu quieras.

select.append('<option value="juan">juan</option>');
select.append('<option value="pedro">pedro</option>');

Ejémplo: https://jsfiddle.net/3ocvwdpm/1/

5
  • Funciona perfecto!!! muchísimas gracias! Cabría la posibilidad de que por ejemplo, si yo en el select Fecha pongo 'Junio 2019' me filtre las facturas de ese mes?? Commented el 3 sept. 2019 a las 7:21
  • El filtro del Select funciona por coincidencia exacta, osea que va a filtrar solo los campos que coincidan exactamente con 'Junio 2019', sino supongo que tienes que cambiar la regex que hace el matcheo
    – Emeeus
    Commented el 3 sept. 2019 a las 10:36
  • he añadido este código y en la lista me sale el string q yo quiero, por ejemplo Jul 2019, Jun 2019... pero a la hora de filtrar la tabla se queda en blanco Commented el 4 sept. 2019 a las 7:30
  • column.data().unique().sort().each(function(d, j) { var r = d.substring(d.length-8, d.length); select.append('<option value="' + r + '">' + r + '</option>'); }); Commented el 4 sept. 2019 a las 7:31
  • Solucionado... <option value="' + d + '">' + r + '</option> Gracias por todo!!!! Commented el 4 sept. 2019 a las 7:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.