Loses the css after refreshing datatable

You have to look for another event in dataTables to call the status function.

From where you call it is for the render of the columns, it is not the best site.

The reality is that you need an event by ROW or call the function once your table has been painted completely.

Looking at the datatables documentation I have seen this event: link Each time the table is "painted" you can call your status function.

For this function to know which is the state_id of each row, add this to dataTable:

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

This way each time a TR (row) is generated, a data-id_estado attribute will be created in each TR.

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

Then in your function status you only have to read each TR and apply the class according to your data-id_estado .

To read attributes of type data- you can use:

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

To go through all the TR you can use:

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

I always advise you to use plugins of this type try to use your events to modify TR, TD, etc. But if for some reason you can not always expect to have the HTML generated and apply your changes.

I hope I have guided you to the solution.

I do not see where you call the function status. This happens to you because you apply the css in ajax you have to do it in

$(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');
})  

so that everyone who finishes reloading the page applies the css, maybe.

You could also use the same function status to save a bit of code but you may have to do some adaptation

I do not see you calling the status function anywhere, anyway what I would do without touching your code, is to save a global variable with the current status, and each time when returning the filtered data, call again to the function "state ()", with the state saved in the global variable, who says state, says necessary value to update and maintain what you had. I hope you understand the 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({ 

I can think of some things

1st in your function states:

I think I could look something prettier like this:

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>';


}

Now, if you can see that in the return of the select, in the OPTION, I have placed a new thing:

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

This should give you optId-1 | optId-2 | optId-3 ...

Now, it's as simple as detecting what id you have:

$(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');
});

What we do basically is, when loading the document, to check the unique id and if it matches the loop, that is equal to its same number, it is that you are in that number. So then we use the array of panel types (default, info, warning ...)

The key here is to generate the unique IDS in the select.

This way you can avoid calling the function states after filtering the contents.

We need the most important thing that is, to keep the IDS values in the options that we later check when loading the document.

This would be in your reload function

When you run reload , you can go to the moment just before restarting the table and the values, save what you are interested in, let it clean everything and at the end add the information of those options again .

You could save even the entire option with the ID and values, then using select2 "delete (); DELETE, that entire HTML tag. Finally you make an append (OPTION); of your option with the values. Everything is restarted except the selected options that you have decided to keep.

Once the web is loaded, those select or options have their IDS, so the 2nd logic of the "document ready" will place the corresponding colors.

Keep colors and avoid executing the states () function after filtering.

I hope it helps you.