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: