cuando se completa readyState, se ejecutará algún código, pero no funciona en el navegador Chrome hasta que se borra el caché y luego se ejecuta solo una vez. Si actualizo, ese código no se ejecutará nuevamente hasta que borre el caché nuevamente y se ejecute solo una vez más. Tengo que ejecutar el código cuando se completa el estado listo porque se ejecuta sobre una tabla de datos que no se cargará hasta que se complete el estado listo. Intenté ejecutar ese mismo código enDocumnt.ready pero no encuentra las identificaciones de los elementos de la tabla de datos, por lo que no sucedió nada. Aquí está el código utilizado:
$(document).on("readystatechange", function(e) { if (document.readyState == "complete") { $(`#salaries-datatable-table`).wrap("<div class='col-12' style='overflow-x:auto'></div>"); $("#salaries-datatable-table_wrapper .dt-buttons").append(`<button class="btn btn-outline- blue btn_size">OK</button>`); } });El resultado es: para envolver, no solo se envolvería la tabla, sino también su contenedor div y para agregar no sucede nada, excepto que la primera vez que se ejecuta el código después de borrar el caché, se agregaría el botón y solo se envolvería la tabla. Espero poder explicarlo adecuadamente.
Esta solución funcionó para mí: después de buscar, descubrí que el evento init.dt se activa después de que se inicializa la tabla de datos, por lo que no necesitaba verificar si el estado listo se completó o no, el init.dt se disparó antes de listo El estado se completó y su comportamiento no difiere en los dispositivos móviles o para el navegador Chrome y no tenía relación con el borrado de caché. El código utilizado:
$(`#salaries-datatable-table`).on('init.dt', function() { console.log('Table initialisation complete '); $(this).wrap("<div class='col-12' style='overflow-x:auto'></div>"); $(this).find(".dt-buttons").append(`<button class="btn">OK</button>`); });Pero aún así, no entendí qué sucedió cuando se completó el estado listo. Espero que alguien pueda explicarlo.