I created 20 Divs dynamically. Now i am trying to add frontend pagination to my div's, But It is not working. I am following this link to add pagination to my webpage. Below is my code in which i created div's and apply pagination.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link type="text/css" href="pagination/simplePagination.css"/>
<script type="text/javascript" src="pagination/jquery.min.js"></script>
<script type="text/javascript" src="pagination/jquery.simplePagination.js"></script>
<style>
.containerdiv{
width: 50%;
position:absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
margin-top: 30px;
}
.image{
background-image: url('3332.jpg');
height:150px;
width: 100%;
}
.name{
text-align: center;
font-weight: bold;
margin-top:10px;
}
.description{
text-align: center;
margin-top:20px;
}
a{
text-decoration: none;
font-size: 20px;
margin-left: 20px;
}
a:visited{
color:blue;
}
a.current {
color: red;
font-size: 25px;
font-weight: bold;
}
#pagin li {
display: inline-block;
}
</style>
</head>
<body>
<h3 style="text-align: center;font-family: arial">Dynamically Created Div</h3>
<div id="main-content" class="slider" style="width: 50%;"></div>
<ul id="pagin"></ul>
<script>
var dataLength = 0;
var names = ['rajat','kunal','naman','divyank','krishna'];
var description = ['Rajat is a very good guy','Kunal is a very good guy','Naman is a very good guy','Divyank is a very good guy','Krishna is a very good guy'];
for(var i=0;i<5;i++){
dataLength++;
var mainContent = document.getElementById('main-content');
var container = document.createElement('div');
var imageDiv = document.createElement('div');
var vendorInfoDiv = document.createElement('div');
var vendorNameDiv = document.createElement('div');
var vendorDescriptionDiv = document.createElement('div');
vendorNameDiv.setAttribute('class','name');
vendorNameDiv.innerHTML = names[i];
vendorDescriptionDiv.setAttribute('class','description');
vendorDescriptionDiv.innerHTML = description[i];
vendorInfoDiv.appendChild(vendorNameDiv);
vendorInfoDiv.appendChild(vendorDescriptionDiv);
imageDiv.setAttribute("class","image");
imageDiv.setAttribute("style","background-image:url('3332.jpg')");
container.setAttribute("style","height:300px;width:250px;border: 1px solid red;background-image: (100%,100%);margin-left:12px;margin-top:10px;float:left");
container.appendChild(imageDiv);
container.appendChild(vendorInfoDiv);
mainContent.appendChild(container);
mainContent.setAttribute('class','card-container');
}
pageSize = 2;
var totalPaginate = Math.round(dataLength/pageSize);
for(var i=1;i<=totalPaginate;i++){
var ulist = document.getElementById('pagin');
var list = document.createElement('li');
var anchor = document.createElement('a');
anchor.setAttribute('href','#');
anchor.innerHTML = i;
list.appendChild(anchor);
ulist.appendChild(list);
}
showPage = function(page) {
$(".paginate").hide();
$(".paginate").each(function(n) {
console.log(n);
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
showPage(1);
</script>
Can anyone please help me to solve this issue or please suggest me any other pagination plugin.
Thanks.
from Add frontend pagination on dynamicall created div elements
No comments:
Post a Comment