Question: How can I put and show images to the page 1 JS-> // selecting required element const element = document.querySelector(".pagination ul"); let totalPages = 10; let page = 2; //calling function with passing parameters and adding inside element which is ul tag element.innerHTML = createPagination(totalPages, page); function createPagination(totalPages, page){ let liTag = ''; let active; let beforePage = page - 1; let afterPage = page + 1; if(page > 1){ //show the next button if the page value is greater than 1 liTag += Prev; } // how many pages or li show before the current li if (page == totalPages) { beforePage = beforePage - 2; } else if (page == totalPages - 1) { beforePage = beforePage - 1; } // how many pages or li show after the current li if (page == 1) { afterPage = afterPage + 2; } else if (page == 2) { afterPage = afterPage + 1; } for (var plength = beforePage; plength <= afterPage; plength++) { if (plength > totalPages) { //if plength is greater than totalPage length then continue continue; } if (plength == 0) { //if plength is 0 than add +1 in plength value plength = plength + 1; } if(page == plength){ //if page is equal to plength than assign active string in the active variable active = "active"; }else{ //else leave empty to the active variable active = ""; } liTag += ${p≤n>h}; } if (page < totalPages) { //show the next button if the page value is less than totalPage(20) liTag += Next; } element.innerHTML = liTag; //add li tag inside ul tag return liTag; //reurn the li tag } HTML-> Pagination in JavaScript | CodingNepal
Question: How can I put and show images to the page 1
JS->
// selecting required element
const element = document.querySelector(".pagination ul");
let totalPages = 10;
let page = 2;
//calling function with passing parameters and adding inside element which is ul tag
element.innerHTML = createPagination(totalPages, page);
function createPagination(totalPages, page){
let liTag = '';
let active;
let beforePage = page - 1;
let afterPage = page + 1;
if(page > 1){ //show the next button if the page value is greater than 1
liTag += <liclass=btn prevonclick=createPagination(totalPages, ${page - 1})><span><iclass=fas fa-angle-left><i>Prev<span><li>;
}
// how many pages or li show before the current li
if (page == totalPages) {
beforePage = beforePage - 2;
} else if (page == totalPages - 1) {
beforePage = beforePage - 1;
}
// how many pages or li show after the current li
if (page == 1) {
afterPage = afterPage + 2;
} else if (page == 2) {
afterPage = afterPage + 1;
}
for (var plength = beforePage; plength <= afterPage; plength++) {
if (plength > totalPages) { //if plength is greater than totalPage length then continue
continue;
}
if (plength == 0) { //if plength is 0 than add +1 in plength value
plength = plength + 1;
}
if(page == plength){ //if page is equal to plength than assign active string in the active variable
active = "active";
}else{ //else leave empty to the active variable
active = "";
}
liTag += <liclass=numb ${active}onclick=createPagination(totalPages, ${plength})><span>${p≤n>h}<span><li>;
}
if (page < totalPages) { //show the next button if the page value is less than totalPage(20)
liTag += <liclass=btn nextonclick=createPagination(totalPages, ${page + 1})><span>Next<iclass=fas fa-angle-right><i><span><li>;
}
element.innerHTML = liTag; //add li tag inside ul tag
return liTag; //reurn the li tag
}
HTML->
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="pagination">
<ul> <!--pages or li are comes from javascript -->
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 3 images
