2

Tengo una datatable en la que en una columna hay un select2, a este select2 le he asignado un color según el valor seleccionado, para ello al traerme la data de dicha columna llamo a una función que comprueba según el id del estado el color/background que le debe asignar a dicho select2, el problema está en que al utilizar un botón personalizado que tengo en la datatable para filtrar por los estados como hace un reload se pierden los css ya que no vuelve a llamar a la función estados que les da los colores. ¿Cómo podría hacerlo?

Botón para filtrar

<div>
<label for="pendientes">Pendientes</label> 
<input type="radio" class="pendientes" id="pendientes" name="st_filter" checked>
<label for="completada">Completadas</label> 
<input type="radio" class="completada" id="completada" name="st_filter">
<input type="button" onclick="$('#tabla_clientes').DataTable().ajax.reload();" value="Filtrar" class="btn btn-primary">
</div>

JS (datatable, select2)

$(document).ready(function() {
var table = $('#tabla_clientes').DataTable({
    'paging': true,
    'info': true,
    'filter': true,
    'stateSave': true,
    'processing': true,
    'serverSide': true,
    "dom": '<"top"iflpB<"clear">>rt<"bottom"p<"clear">>',
    'ajax': {
        "method": "POST",
        "url": "../clientes.php"
    },
    "columns": [
        {"data": "id"},
        {"data": "nombre"},
        {"data": "email"},
        {
            render: estados
        }
    ],
    drawCallback: function(){

        $(".select_estados").select2({
            minimumResultsForSearch: -1,
            ajax: {
                url: "../estados.php",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page
                    };
                },
                processResults: function (data, page) {
                    return {
                        results: data.items
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }
        });
    }

});

function estados(full, type, data) {
    if (data.id_estado == 1) {
        $('table .select2-selection--single').addClass('label label-primary');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    } else if (data.id_estado == 2) {
        $('table .select2-selection--single').addClass('label label-success');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    } else if (data.id_estado == 3) {
        $('table .select2-selection--single').addClass('label label-info');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    } else if (data.id_estado == 4) {
        $('table .select2-selection--single').addClass('label label-warning');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';  
    } else if (data.id_estado == 5) {
        $('table .select2-selection--single').addClass('label label-danger');
        $('table .select2-selection__rendered').css('color', 'white');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    } else{
        $('table .select2-selection--single').addClass('label label-default');
        $('table .select2-selection__rendered').css('color', 'black');
        $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
        return '<select class="select_estados"><option value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';
    }
}
});

Imágenes de ejemplo:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

4
  • 1
    no veo donde llamas a la función estado. Commented el 5 mar. 2018 a las 11:14
  • 1
    la llamo en "columns", donde me traigo la data de la table.
    – ccfz
    Commented el 5 mar. 2018 a las 11:18
  • Estas utilizando datatables.net? o cual? que version? Commented el 6 mar. 2018 a las 0:11
  • Estoy utilizando datatables.net con jquery, la versión es 1.10.13. Estoy comprobando poco a poco las respuestas que me estáis ofreciendo, gracias por las respuestas a todos !
    – ccfz
    Commented el 6 mar. 2018 a las 10:43

4 respuestas 4

2

no veo donde llamas a la función estado. Esto te pasa por que aplicas los css en ajax tienes que hacerlo en

$(document).ready(function (){
    // por ejemplo haciendo esto, con algunas adaptaciones según tus necesidades
    $('table .select2-selection--single').addClass('label label-primary');
    $('table .select2-selection__rendered').css('color', 'white');
    $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
})  

para que cada que termine de recargar la pagina aplique los css, a lo mejor .

También podrías usar la misma función estado para ahorrarte un poco de codigo pero tal vez tengas que hacerle alguna adaptación

4
  • 2
    La función estado la llamo en el array "columns" donde me traigo la data de la tabla, y tanto la llamada a la función como la función estados están dentro de la función ready. Lo que pasa es que al copiar y pegar el código no se ha tabulado correctamente aquí.
    – ccfz
    Commented el 5 mar. 2018 a las 11:35
  • Te da algún error por la consola del navegador? Commented el 5 mar. 2018 a las 11:38
  • no has logrado corregir el problema? si lo has hecho no olvides marcar la pregunta como resulta Commented el 6 mar. 2018 a las 7:57
  • Error no me da ninguno, simplemente que al utilizar la función DataTable().ajax.reload(null, false); desaparecen los estilos de los options. Ando comprobando todas las respuestas con paciencia, no dudaré en marcar como resuelta la respuesta que vea correcta para mi problema, gracias !
    – ccfz
    Commented el 6 mar. 2018 a las 10:45
1

No veo que llames a la función estado por ningún lado, de todos modos lo que yo haría sin tocar mucho tu código, es guardar una variable global con el estado actual, y cada vez al devolver los datos filtrados, volver a llamar a la función "estado()", con el estado guardado en la variable global, quien dice estado, dice valor necesario para actualizar y mantener lo que tenias. Espero se entienda la idea.

$(document).ready(function() {
var estado = 0; //Ve actualizandolo cada vez que filtran o al inicio cuando lo llamas la primera vez
var table = $('#tabla_clientes').DataTable({ 
1
  • Lo has solucionado ya ? la clave es volver a llamar a tu función estado cuando le dan al botón filtrar, para actualizar los datos. Para facilitar la lectura puedes encapsular la petición ajax : ajax: { url: "../estados.php", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, page: params.page }; } en una función y así volver a llamarla cuando sea neceasrio. Commented el 6 mar. 2018 a las 8:54
1

Se me ocurren algunas cosas

1º en tu función estados:

Creo que podría quedar algo mas bonita así:

function estados(full, type, data) {

    // En primer lugar, genera las variables que mas adelante pudieras escalar dinámicamente
    arrLabelType = ['0' => 'default', '1' => 'primary', '2' => 'success', '3' => 'info', '4' => 'warning', '5' => 'danger']; 

    $('table .select2-selection--single').addClass('label label-'+arrLabelType[data.id_estado]);


    if(data.id_estado == 0)
    {
        $('table .select2-selection__rendered').css('color', 'black');
    }else{
        $('table .select2-selection__rendered').css('color', 'white');
    }

    $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');

    return '<select class="select_estados"><option id=optId-'+data.id_estado+' value='+data.id_estado+'>'+data.nombre_estado+'</option></select>';


}

Ahora, si puedes observar que en el return del select, en el OPTION, he colocado una cosa nueva:

Su ID úinica de la opción seleccionada, ya que pones 'optId-'+data.id_estado+....

Esto debería darte optId-1 | optId-2 | optId-3...

Ahora, es tan sencillo como detectar que id tiene:

$(document).ready(function(){
    arrLabelType = ['0' => 'default', '1' => 'primary', '2' => 'success', '3' => 'info', '4' => 'warning', '5' => 'danger']; 

    for(i = 0; i < arrLabelType.length; i++)
    {
        if($('#optId-'+i+'').attr('id').split('-')[1] == i)
        {

            $('table .select2-selection--single').addClass('label label-'+arrLabelType[i]);
        }

        if($('#optId-'+i+'').attr('id') == 0)
        {
            $('table .select2-selection__rendered').css('color', 'black');
        }else{
            $('table .select2-selection__rendered').css('color', 'white');
        }

    }

    $('table .select2-selection--single .select2-selection__arrow b').css('border-color', 'white transparent transparent transparent');
});

Lo que hacemos basicamente es, al cargar el documento, comprobar la id única y si coincide con el bucle, osea es igual a su mismo número, es que estás en ese numero. Por lo que entonces hacemos uso del array de tipos de paneles (default, info, warning...)

La clave aquí es generar las IDS unicas en el select.

De esta forma puedes evitar llamar la función estados tras filtrar los contenidos.

Nos falta lo mas importante que es, hacer permanecer los valores de las IDS en los options que mas tarde chequeamos al cargar el documento.

Esto sería en tu función reload

Cuando se ejecute reload, puedes ir al momento justo antes de reiniciar la tabla y los valores, guardas lo que te interesa, dejar que limpie todo y al final añadir de nuevo la información de esos options.

Podrías guardar incluso el option entero con la ID y los valores, después usando select2 "delete(); ELIMINAS, esa etiqueta HTML entera. Finalmente haces un append(OPTION); de tu option con los valores. Quedando todo reiniciado excepto las opciones seleccionadas que has decidido mantener.

Una vez cargue la web, esos select u options tienen sus IDS, por lo que la 2ª lógica del "document ready" situará los colores correspondientes.

Mantienes colores y evitas ejecutar la función estados() tras filtrar.

Espero que te sea de ayuda.

-1
+50

Tienes que buscar otro evento en dataTables para llamar a la función estado.

Desde donde lo llamas es para el render de las columnas, no es el mejor sitio.

La realidad es que tu necesitas un evento por ROW o llamar a la función una vez tu tabla haya se haya pintado por completo.

Mirando en la documentación de datatables he visto este evento: https://datatables.net/reference/event/draw Cada vez que la tabla se "pinta" puedas llamar a tu función estado.

Para que esta función sepa cual es el id_Estado de cada row, añade esto a dataTable:

$('#tabla_clientes').dataTable( {
  'createdRow': function( row, data, dataIndex ) {
      $(row).attr('data-id_estado', data.id_estado);
  }
});

De esta manera cada vez que se genere un TR(row) se creará un atributo data-id_estado en cada TR.

<tr data-id_estado='3'>...</tr>

Luego en tu función estado solo tienes que leer cada TR y aplicar la clase según su data-id_estado.

Para leer atributos de tipo data- puedes usar:

$(this).attr("data-id_estado")

Para recorrer todos los TR puedes usar:

$('#clientes> tbody  > tr').each(function() { /* Lo que debas de hacer en cada TR */ });

Yo te aconsejo siempre que uses plugins de este tipo intentar usar sus eventos para modificar TR, TD, etc. Pero si por alguna razón no puedes espera siempre a tener el HTML generado y aplicas tus cambios.

Espero haberte guiado a la solución.

2
  • Gracias, funciona correctamente, es una solución breve, sencilla y funcional, desconocía lo de createdRow, por cierto hay un error que me gustaría que editases para el que venga detrás, en $(row).attr('data-id_estado', data.id_estado); sobra un espacio que provoca error. Y gracias a todos por las respuestas :)
    – ccfz
    Commented el 6 mar. 2018 a las 11:17
  • Editado. Un placer ayudarte. Commented el 6 mar. 2018 a las 11:19

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.