Tengo un directorio en línea simple y una aplicación de alojamiento de archivos que permite recorrer los directorios.

Estoy cargando el contenido de DataTables usando AJAX borrando todas las filas en DataTable y luego agregando nuevas filas con los datos actualizados. También estoy actualizando la URL con la ruta actual usando la función replaceState .

Actualmente, puedo usar el botón Atrás una vez y cargará el contenido de DataTable de la solicitud AJAX anterior, pero la página permanece estática en las siguientes pulsaciones del botón Atrás. El botón de avance nunca funciona.

El código está abajo:

 <script> $('body').on('click', '.folder_link', function (){ folder_path = this.value req = $.ajax({ url: '{{ url_for(request.endpoint) }}' + folder_path, type: 'POST', data: { "path": folder_path }, success: function(data){ datatable = $('#datable_documents').DataTable(); datatable.clear().draw(); for (var i = 0; i < data['data'].length; i++) { datatable.row.add(data['data'][i]); } datatable.draw(); window.history.pushState( { url: '{{ url_for(request.endpoint) }}' + folder_path, data: data }, '', '{{ url_for(request.endpoint) }}' + folder_path ); url_next = '{{ url_for(request.endpoint) }}' + folder_path; window.history.replaceState( { url: '{{ url_for(request.endpoint) }}', data: data }, {}, url_next ); }, error: function(jqXHR, textStatus, errorThrown){ alert('error'); } }); $(window).on('popstate', function(event){ location.reload(true); }); }); </script>