I have url for page 1 as http://www.dev-crn.com:5703/tag/Cloud on click of button next i need the url updated for page 2 as http://www.dev-crn.com:5703/tag/Cloud/1 how can i do that in javascript ot jquery? i have a parameter declared as var pagenumber already and var urlPath = window.location.pathname; where the link is fetched. how to make it dynamic way of incrementing the url?
Pagenumber is total pages present in my case i have 8 pages so each time onclick of next button i need to increment the url upto 8 pages
window.location = `${window.location.host}/tag/Cloud/${pagenumber}`;
You cannot "increase" a URL but you can increase numbers and use them to build up your URLs.
const BASE_URL = "https://example.com";
const MAX_POSITIONS = 8;
const BTN_NEXT = document.getElementById("btn-next");
const BTN_PREV = document.getElementById("btn-prev");
const URL_VALUE = document.getElementById("url-value");
const _createUrl = function(position) {
if (position > 0) {
return BASE_URL + "/" + position;
}
return BASE_URL;
};
let currentPosition = 0;
BTN_NEXT.addEventListener("click", function() {
if (currentPosition === MAX_POSITIONS - 1) {
return;
}
currentPosition++;
URL_VALUE.textContent = _createUrl(currentPosition);
});
BTN_PREV.addEventListener("click", function() {
if (currentPosition === 0) {
return;
}
currentPosition--;
URL_VALUE.textContent = _createUrl(currentPosition);
});<button id="btn-next">Next</button>
<button id="btn-prev">Prev</button>
<div>
<h4>URL</h4>
<span id="url-value"></span>
</div>Can you please try this:
You will be having these three buttons for all of your pages.
Just change the value of the middle button for each page.
Hope I understood your requirements.
$('.change_page').click(function() {
var this_page = $('#this_page').html();
var new_location = '';
var this_location = window.location.href;
var this_action = $(this).attr('id');
if (this_action == 'previous' && this_page != '1') {
var page_number = parseInt(this_page) - 1;
new_location = this_location + '/' + page_number;
}
if (this_action == 'next' && this_page != '8') {
var page_number = parseInt(this_page) + 1;
new_location = this_location + '/' + page_number;
}
console.log(new_location);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This page is currently on page number 4<br/>
<button id="previous" class="change_page">previous</button>
<button id="this_page">4</button>
<button id="next" class="change_page">next</button>