Lose css after refreshing datatable

I don't see where you call the status function. 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 every time I finish reloading the page, apply the css, maybe.

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

I don't see that you call the state function anywhere, anyway what I would do without touching your code too much, is to save a global variable with the current state, and each time when returning the filtered data, call the function again "state()", with the state stored in the global variable, who says state, says value needed to update and maintain what you had. I hope you get 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({ 

some things occur to me

1st in your function states:

I think it could be more beautiful 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 it has:

$(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 basically do is, when loading the document, check the unique id and if it matches the loop, that is, it is equal to its same number, it means that you are in that number. So we then make use of 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 states function after filtering the contents.

We are missing the most important thing, which is to make the IDS values ​​remain in the options that we later check when loading the document.

This would be in your reload function

When reload is executed , you can go to the moment just before resetting 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 even save the entire option with the ID and values, then using select2 "delete(); DELETE, that entire HTML tag. Finally you do an append(OPTION); of your option with the values. Getting everything reset 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.

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

I hope this helps you.

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

From where you are calling it is for the rendering of the columns, it is not the best place.

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

Looking in the datatables documentation I have seen this event: https://datatables.net/reference/event/draw Every time the table is "painted" you can call your state function.

For this function to know what the id_Status of each row is, add this to the dataTable:

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

In this way, each time a TR(row) is generated, a data-id_state attribute will be created in each TR.

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

Then in your status function you just have to read each TR and apply the class according to its data-id_status .

To read attributes of type data- you can use:

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

To loop through all TRs you can use:

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

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

I hope I have guided you to the solution.