Блог

Я пытаюсь выполнить разбивку на страницы с помощью Javascript, и у меня возникли проблемы с обновлением URL-адреса до ?page={PageNumber} . Я отлично разбиваю страницы на 100 элементов, но URL-адрес остается прежним, и я хочу, чтобы казалось, что страница изменилась. Любая помощь приветствуется.

Я пытаюсь добиться domain.com/search / для domain.com/search/?page ={Номер страницы}

     // Adding Page option select menu
    if (document.querySelector("#page-no").innerHTML === "") {
        for (let index = 1; index <= totalPages; index  ) {
            let option = document.createElement("option");
            option.setAttribute("value", `${index}`);
            option.textContent = index;

            if (index === 1) {
                option.selected = true;
            }

            document.querySelector("#page-no").appendChild(option);
        }
    }

    document.querySelector(".total").textContent =
        apiResult.data.pagination.total_pages;

    // Add event listeners on pagination items
    document.querySelector(".prev").addEventListener("click", prevBtnClick);
    document.querySelector(".next").addEventListener("click", nextBtnClick);
    document.querySelector("#page-no").addEventListener("change", optionSelect);
};

// Event Listener on Previous Button
const prevBtnClick = () => {
    if (currentPage > 1) {
        document.getElementById("page-no").selectedIndex -= 1;
        apiresultFn(animalType, searchLocation, --currentPage);
    }
};

// Event Listener on Next Button
const nextBtnClick = () => {
    if (currentPage < totalPages) {
        document.getElementById("page-no").selectedIndex  = 1;
        apiresultFn(animalType, searchLocation,   currentPage);
    }
};

// Event Listener on Page Menu Change
const optionSelect = (e) => {
    currentPage = parseInt(e.target.value);
    apiresultFn(animalType, searchLocation, currentPage);
};
  

Это добавит добавление строки запроса. Попробуйте использовать это в своей логике кликов

 if (history.pushState) {
    var newurl = window.location.protocol   "//"   window.location.host   window.location.pathname   '?page=2';
    window.history.pushState({path:newurl},'',newurl);
}