Добавить пагинацию внешнего интерфейса для динамически создаваемых элементов div - PullRequest
Новая
       4

Добавить пагинацию внешнего интерфейса для динамически создаваемых элементов div

0 голосов
/ 28 сентября 2018

Я создал 20 Div динамически.Теперь я пытаюсь добавить нумерацию веб-интерфейса к моему div, но это не работает.Я перехожу по этой ссылке, чтобы добавить нумерацию страниц на мою веб-страницу.Ниже приведен мой код, в котором я создал 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>

Может кто-нибудь помочь мне решить эту проблему или предложить мне любой другой плагин для нумерации страниц.

Спасибо.

1 Ответ

0 голосов
/ 30 сентября 2018

Только что забыл о плагине. Используйте пользовательский код, чтобы применить нумерацию внешнего интерфейса к динамически создаваемым элементам div.Просто добавьте неупорядоченный список после того, как вы добавили элемент Div с идентификатором «main-content», как показано ниже. 

 <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 для запуска этого кода.

Это самый простой код для нумерации веб-интерфейсов.Я отредактировал ваш код, вы можете просто скопировать и вставить.

...