Sunday, 30 September 2018

Add frontend pagination on dynamicall created div elements

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