Tengo dos funciones displayDataGraph y displayDataTable que muestran datos como una tabla y un gráfico. Tengo un botón que alterna entre visualización de gráfico y tabla. El gráfico es la vista predeterminada y el cambio a la vista de tabla ocurre con el botón de alternar.
Cada página tiene un botón anterior y siguiente que lleva al usuario a los 20 conjuntos de datos siguientes o a los 20 conjuntos de datos anteriores.
El comportamiento esperado es que al ver los datos como una tabla, la página siguiente también muestre los datos como una tabla, y que al ver los datos como un gráfico, la página siguiente o anterior también muestre los datos como un gráfico.
El comportamiento actual es que mientras veo como un gráfico y hago clic en el botón view as table , se muestra la tabla. Pero cuando hago clic en siguiente o anterior, me lleva de vuelta al gráfico en lugar de a la siguiente página del formato de tabla. Esto no sucede con el gráfico. Cuando hago clic en el siguiente botón mientras veo un gráfico, me lleva a la página siguiente como gráfico (¿quizás porque es el predeterminado?)
Lo que significa que la alternancia funciona solo una vez, y cuando hago clic en siguiente o anterior, simplemente vuelve a la vista/estado original/predeterminado
¿Alguna idea de por qué ocurre este comportamiento o cómo se puede solucionar?
Mi código es bastante largo y no sé cuánta ayuda sería compartir fragmentos, pero aquí está la función de alternancia:
const toggleButton = () => { const data = document.querySelectorAll("button.data"); const dataTable = document.querySelector(".dataTable"); const dataGraph = document.querySelector(".dataGraph"); if (dataTable && dataGraph) { if (dataTable.style.display === "block") { dataTable.style.display = "none"; dataGraph.style.display = "block"; data.forEach( (element) => (element.innerText = "Display Data as Table") ); } else { dataGraph.style.display = "none"; dataTable.style.display = "block"; data.forEach( (element) => (element.innerText = "Display Data as Chart") ); } } }; Tengo otras funciones relevantes como const displayDataTable const displayGraphTable const paginateData
Debe poder guardar el estado de vista deseado al actualizar la página. Como menciona Lauren Groh, ¿puedes guardarlo en Session Storage?
Cuando su página se carga, parece que la propiedad de visualización css para la tabla de datos se establece en none y la propiedad de visualización css en el gráfico de datos se establece en block . Eso está bien, pero está codificado en la carga de la página. Su botón de alternancia de javascript cambia el estilo css correctamente, pero cuando actualiza la página, carga todo desde el principio.
Para resolverlo, debe agregar un control en la carga de la página que mire el almacenamiento de la sesión antes de decidir si la tabla de datos o el gráfico de datos deben mostrar none o block . Aquí hay una idea:
const data = document.querySelectorAll("button.data"); const dataTable = document.querySelector(".dataTable"); const dataGraph = document.querySelector(".dataGraph"); //extract the functionality: const loadGraphView = () => { dataTable.style.display = "none"; dataGraph.style.display = "block"; data.forEach((element) => (element.innerText = "Display Data as Table")); // Save data to sessionStorage sessionStorage.setItem("dataViewType", "graph"); }; const loadTableView = () => { dataGraph.style.display = "none"; dataTable.style.display = "block"; data.forEach((element) => (element.innerText = "Display Data as Chart")); sessionStorage.setItem("dataViewType", "table"); }; const toggleView = () => { const viewType = sessionStorage.getItem("dataViewType"); if (viewType) { if (viewType === "table") { loadTableView(); } else if (viewType === "graph") { loadGraphView(); } } }; //At some point when you load the page, call toggle view //Then any time you click the button, have it call toggle view. toggleView();Guardar el estado en Almacenamiento de sesión le permitirá realizar un seguimiento de la vista deseada hasta que la persona cierre su navegador. Si desea mantener el estado después de que se cierre el navegador, puede hacer algo similar con el almacenamiento local.
localStorage.setItem('myCat', 'Tom'); const cat = localStorage.getItem('myCat'); Probablemente haya mejores formas de implementar este código. Solo traté de ponerlo de una manera que encaje con lo que nos mostraste y debería permitirte tomarlo desde allí y hacerlo más bonito. :-)
Si hay una actualización involucrada, tal vez la alternancia esté predeterminada, como dijiste. Puede almacenar el estado deseado en SessionStorage para que se mantenga después de la actualización.