在动态创建的 div 元素上添加前端分页答案

【问题标题】：Add frontend pagination on dynamicall created div elements在动态创建的 div 元素上添加前端分页
【发布时间】：2018-10-01 00:54:58
【问题描述】：

我动态创建了 20 个 Div。现在我正在尝试将前端分页添加到我的 div 中，但它不起作用。我正在关注this 链接以向我的网页添加分页。下面是我创建 div 并应用分页的代码。

<!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>

谁能帮我解决这个问题，或者请向我推荐任何其他分页插件。

谢谢。

【问题讨论】：

标签： javascript html pagination

【解决方案1】：

刚刚忘记了插件，使用自定义代码将前端分页应用于动态创建的 div 元素。只需在添加 id 为“main-content”的 Div 元素后添加无序列表，如下所示。

 <ul id="pagin"></ul>

并添加变量，var dataLength = 0; 您的脚本开始并在您的 for 循环中增加它，如 dataLength++;

在你的 for 循环结束后添加下面的代码。

 var 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) {
    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);

注意：你需要使用jquery来运行这段代码。

这是最简单的前端分页代码。我已经编辑了你的代码，你可以简单地复制和粘贴。

【讨论】：