In a sense, this is chatbox application. My prevButton and nextButton are removed from past queries once a new query is made so the pagination only works on the current query but I would like to be able to refer to past queries instead of having to ask the query again just to use the pagination
let page = 1;
let allResults = JSON.parse('{{ result|tojson|safe }}');
let itemsPerPage = 1;
var queryId = 0;
let queryState = null;
// Retrieve the existing data
let storedData = sessionStorage.getItem('resultsHistory');
// If there's no existing data, create a new object
// Otherwise, parse the existing data
let resultsHistory = storedData ? JSON.parse(storedData) : {};
window.onload = function() {
var container = document.querySelector('.container');
container.scrollTop = container.scrollHeight;
fetchData();
}
function renderState(queryState) {
// Check if the state object exists
if (queryState) {
// Render the state
console.log('Query state')
console.log(resultsHistory);
} else {
console.error('No state found for queryId: ' + queryId);
}
}
function fetchData() {
// Get the queryId from localStorage
queryId = localStorage.getItem('queryId');
if (queryId === null) {
queryId = 0;
} else {
queryId = parseInt(queryId);
}
queryId++;
console.log('Current queryId: ' + queryId);
// Save the queryId to localStorage
localStorage.setItem('queryId', queryId.toString());
let data = allResults.slice()
queryState = {
total_pages: Math.ceil(data.length / itemsPerPage),
current_page: 1,
results: data,
queryId: queryId
};
resultsHistory[queryId] = queryState;
console.log(resultsHistory[queryId]);
// Store the updated history
sessionStorage.setItem('resultsHistory', JSON.stringify(resultsHistory));
var queryDiv = document.querySelector('.query');
if (!queryDiv) {
// If no 'queryDiv' exists, create a new one
queryDiv = document.createElement('div');
queryDiv.className = 'query';
queryDiv.id = 'query' + queryId;
document.querySelector('.container').appendChild(queryDiv);
}
// Check if a 'buttonsContainer' already exists
var buttonsContainer = document.querySelector('.buttonsContainer');
if (!buttonsContainer) {
// If no 'buttonsContainer' exists, create a new one
buttonsContainer = document.createElement('div');
buttonsContainer.className = 'buttonsContainer';
document.querySelector('.container').appendChild(buttonsContainer);
}
// Create a new 'buttonsDiv' for this query
var buttonsDiv = document.createElement('div');
buttonsDiv.className = 'buttons';
buttonsDiv.id = 'buttons' + queryId;
buttonsDiv.dataset.queryId = queryId; // Store the queryId as a data attribute
buttonsContainer.appendChild(buttonsDiv);
// Create the previous and next buttons for this query
let prevButton = document.createElement('button');
prevButton.id = 'prevButton' + queryId;
prevButton.textContent = 'Previous';
buttonsDiv.appendChild(prevButton);
let nextButton = document.createElement('button');
nextButton.id = 'nextButton' + queryId;
nextButton.textContent = 'Next';
buttonsDiv.appendChild(nextButton);
fetchPage(queryId, 1);
addPaginationEventListeners(queryId, prevButton, nextButton, buttonsDiv);
// generatePaginationButtons(queryId, queryState);
}
function addPaginationEventListeners(queryId, prevButton, nextButton, buttonsDiv) {
prevButton.addEventListener('click', function() {
var queryId = this.parentElement.dataset.queryId;
if (resultsHistory[queryId].current_page > 1) {
resultsHistory[queryId].current_page--;
fetchPage(queryId, resultsHistory[queryId].current_page);
renderState(resultsHistory[queryId]);
}
});
nextButton.addEventListener('click', function() {
var queryId = this.parentElement.dataset.queryId;
if (resultsHistory[queryId].current_page < resultsHistory[queryId].total_pages) {
resultsHistory[queryId].current_page++;
fetchPage(queryId, resultsHistory[queryId].current_page);
renderState(resultsHistory[queryId]);
}
});
}
function fetchPage(queryId, pageNumber) {
let start = (pageNumber - 1) * itemsPerPage;
let end = start + itemsPerPage;
let data = resultsHistory[queryId].results.slice(start, end);
// Update the current page number
resultsHistory[queryId].current_page = pageNumber;
populateTable(data);
}
function populateTable(data) {
let tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
tableBody.innerHTML = '';
for (let item of data) {
for (let [key, value] of item) {
let row = document.createElement('tr');
let cellKey = document.createElement('td');
let cellValue = document.createElement('td');
cellKey.textContent = key;
cellValue.textContent = value;
row.appendChild(cellKey);
row.appendChild(cellValue);
tableBody.appendChild(row);
}
}
}
<div class="common-buttons-container"></div>
I’ve created a new set of buttons with a unique id for each query and appended them to the specific ‘queryDiv’ of that query