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?? el 3 sep. 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
    el 3 sep. 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 el 4 sep. 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>'); }); el 4 sep. 2019 a las 7:31
  • Solucionado... <option value="' + d + '">' + r + '</option> Gracias por todo!!!! el 4 sep. 2019 a las 7:38

Tu Respuesta

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

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