1

Tengo una tabla con DataTable, pero al momento de querer utilizar el plugin Select2, la tabla no muestra el desplegable respectivo, cuando quito su llamado en el JavaScript, funciona, pero sin los estilos que brinda el plugin, la tabla la dibujo desde un controlador de CodeIgniter, por lo que no hallo forma de hacer que funcione, ayuda por favor.

Este es el fallo que tengo en la tabla DataTable Tabla DataTable con el plugin Select2 sin funcionar

Este es el controlador en el cual "dibujo la tabla"

Todos los datos los obtengo por medio de un modelo, el modelo no lo adjunto porque solo es la obtencion de la información del base de datos

    /* MOSTRAR ORDENES DE TRABAJO */
            public function mostrarServicioTecnico() {
                
                $resultadoList = $this->reportes_model->mostrarServicioTecnico();
                $resultado = array();
                $i = 1;
                
                if (!empty($resultadoList)) {
                    
                    foreach ($resultadoList as $key => $value) {
                        
                        /*TRANSFORMACION PARA HACER LA FECHA MAS LEGIBLE*/
                        $fecha = $value['Fecha_OTServicioTecnico'];
                        setlocale(LC_ALL, 'spanish');
                        $fechaNueva = strftime("%d de %B de %Y a las %H:%M:%S", strtotime($fecha));
                        
                        /*CONCATENACION DEL NOMBRE Y APELLIDO DEL CLIENTE*/
                        $nombreApellido = $value['Nombre_Cliente'] . ' ' . $value['Apellido_Cliente'];
                        
                        /* CONDICIONAL PARA MOSTRAR EN EL SELECTOR EL ESTADO DEL DOCUMENTO EN PALABRAS */
                        if ($value['Estado_OTServicioTecnico']=="1"){
                            $estado= "Vigente";
                        }else{
                            $estado = "Anulada";
                        }
                        
                        /* CREACION DEL SELECTOR DENTRO DE LA TABLA PARA CAMBIAR SU ESTADO POSTERIORMENTE */
                        $estadoDocumento = '<select id="estadoDocumento" name="estadoDocumento" class="form-control" data-fouc>
    
                                                <option value="'.$value['Estado_OTServicioTecnico'].'">
                                        
                                                    '.$estado.'
                                                    
                                                </option>
                                            </select>';
                        
                        /* ESCRITURA DEL BOTON DE LA TABLA PARA VER LA INFORMACION DE LA ORDEN DE TRABAJO */
                        $acciones = '<div class="list-icons"><a href="#" id="verReporteOtServicioTecnico" value="' .
                            $value['ID_OTServicioTecnico'] . '" class="btn btn-primary btn-icon" type="button"><i class="icon-info22"></i></a>';
                        
                        $resultado['data'][] = array(
                            
                            $i++,
                            $nombreApellido,
                            $value['Nombre_Documento'],
                            $estadoDocumento,
                            $value['NumeroDocumento_OTServicioTecnico'],
                            $value['Descripcion_OTServicioTecnico'],
                            $fechaNueva,
                            $value['Total_OTServicioTecnico'],
                            $acciones
                        
                        );
                    }
                    
                } else {
                    $resultado['data'] = array();
                }
                
                echo json_encode($resultado);
                
            }

Este es el javascript donde utilizo el plugin datatable y muestro la informacion del controlador por medio de Ajax

/* VER ORDENES DE TRABAJO SERVICIO TECNICO */
$(document).ready(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        $('#tablaReportePloteo').DataTable().responsive.recalc();
        $('#tablaReporteServicioTecnico').DataTable().responsive.recalc();
    })
    $('#tablaReporteServicioTecnico').DataTable({
        ajax: 'http://localhost/ci3/reportes/mostrarServicioTecnico',
        dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
        order: [],
        responsive: true,
        autoWidth: false,
        processing: true,
        language: {
            "sProcessing": "Procesando...",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            },
            // Select2 for length menu styling
            
            // Initialize
            
            search: '<span>Filtro:</span> _INPUT_',
            searchPlaceholder: 'Escriba para buscar...',
            lengthMenu: '<span>Mostrar:</span> _MENU_',
            paginate: {
                'first': 'First',
                'last': 'Last',
                'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
            }
        },
        buttons: {
            dom: {
                button: {
                    className: 'btn btn-light'
                }
            },
            buttons: [
                {
                    extend: 'copy',
                    text: 'Copiar'
                },
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'pdf',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                },
                {
                    extend: 'print', text: 'Imprimir',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5]
                    }
                }
            ]
        }
    })
    $('.dataTables_length select').select2({
        minimumResultsForSearch: Infinity,
        dropdownAutoWidth: true,
        width: 'auto'
    });
});

Por ultimo el llamado del plugin select2 en el javascript

$('#estadoDocumento').select2({
    placeholder: 'Seleccione un documento',
    minimumResultsForSearch: Infinity,
})
3
  • Yo creo que tu problema no está en ningún otro lado más que en una incompatibilidad con datatables y select2. Te recomiendo ocupar otra librería como selectpicker en lugar de select2 para solucionar este choque de compatibilidad. el 25 oct. 2020 a las 5:24
  • 1
    Asegúrate de estar usando las versiones más recientes de jQuery, DataTables y Select2 para evitar estos problemas.
    – Triby
    el 26 oct. 2020 a las 18:17
  • 1
    Si el select está dentro de la tabla, no debes asignar ni acceder por ID, sino por clase y aplica .select2() hasta que se haya cargado la tabla, incluyendo una función con drawCallback
    – Triby
    el 26 oct. 2020 a las 18:19

1 respuesta 1

3
+50

Como te había dicho en los comentarios, debes usar clase en lugar de ID para los select y la razón es muy sencilla: Con $('#estadoDocumento'), jQuery buscará solo un elemento, porque los ID deben ser únicos, y solo hará los cambios al primero que encuentre.

                   /* CREACION DEL SELECTOR DENTRO DE LA TABLA PARA CAMBIAR SU ESTADO POSTERIORMENTE */
                    $estadoDocumento = '<select class="estadoDocumento" name="estadoDocumento" class="form-control" data-fouc>

                                            <option value="'.$value['Estado_OTServicioTecnico'].'">
                                    
                                                '.$estado.'
                                                
                                            </option>
                                        </select>';

Aparte de esto, no se aplican correctamente select2 porque debe hacerse cuando ya se cargaron los datos en la tabla y DataTables te da la opción agregando una función en la propiedad drawCallback.

Finalmente, traté de usar las versiones más recientes de cada script (jQuery, DataTables y Select2) buscando evitar problemas de compatibilidad. Por supuesto, para el ejemplo no puedo usar una petición AJAX, sino un arreglo que es muy similar a lo que recibes desde PHP y debe reflejar el funcionamiento que deseas.

// Solo para crear los select
// IMPORTANTE: No se usa ID, sino CLASS
let selectData = '<select class="estadoDocumento" name="estadoDocumento"><option disabled selected>Seleccione un documento</option><option value="1">Vigente</option><option value="2">Anulada</option></select>';
// Datos de ejemplo para cargar la tabla
let resultData = [
    [1, 'Andrea Rodríguez', 'Factura', selectData, '000154'],
    [2, 'David Alejandro Paucar Briones', 'Recibo', selectData, '00037'],
    [3, 'Roxana María Pérez', 'Factura', selectData, '000155']
];

$(document).ready(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        $('#tablaReportePloteo').DataTable().responsive.recalc();
        $('#tablaReporteServicioTecnico').DataTable().responsive.recalc();
    })
    $('#tablaReporteServicioTecnico').DataTable({
        // Para este ejemplo no se carga por AJAX
        // ajax: 'http://localhost/ci3/reportes/mostrarServicioTecnico',
        // Se usan los datos definidos previamente
        data: resultData,
        dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
        order: [],
        responsive: true,
        autoWidth: false,
        processing: true,
        language: {
            "sProcessing": "Procesando...",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            },
            // Select2 for length menu styling
            
            // Initialize
            
            search: '<span>Filtro:</span> _INPUT_',
            searchPlaceholder: 'Escriba para buscar...',
            lengthMenu: '<span>Mostrar:</span> _MENU_',
            paginate: {
                'first': 'First',
                'last': 'Last',
                'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
            }
        },
        buttons: {
            dom: {
                button: {
                    className: 'btn btn-light'
                }
            },
            buttons: [
                {
                    extend: 'copy',
                    text: 'Copiar'
                },
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
                {
                    extend: 'pdf',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
                {
                    extend: 'print', text: 'Imprimir',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                }
            ]
        },
        // Ejecuar cuando se carguen todos los datos en la tabla
        drawCallback: (settings) => {
            // Aplicar select2 con las opciones deseadas
            $('.estadoDocumento').select2({
                placeholder: 'Seleccione un documento',
                minimumResultsForSearch: Infinity,
            });
        }
    });
});
<link href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<table id="tablaReporteServicioTecnico">
<thead>
  <tr>
      <th>#</th>
      <th>Cliente</th>
      <th>Tipo Documento</th>
      <th>Estado Documento</th>
      <th>Número de documento</th>
  </tr>
</thead>
<tbody>
</tbody>
</table>

1
  • Perfecto colega, funciona perfectamente tu solución. Muchas Gracias. el 27 oct. 2020 a las 21:49

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.