comment je peux réutiliser une fonction

Question

comment je peux réutiliser une fonction

Demandé el 26 de Janvier, 2020: Quand la question a-t-elle été
94 affichage: Nombre de visites la question a
1 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je travaille sur la pagination. J'ai pris este code comme l'exemple.

La seule chose que j'ai, c'est ma propre fonction qui crée un panier de produits de façon dynamique et je veux l'utiliser mais je ne comprends pas comment les assembler.

function createNewElement(elementName, attrList, contentList) {
    if (attrList == null) {
        return document.createTextNode(elementName);
    }
    const element = document.createElement(elementName);
    attrList.forEach((attr) => {

        element.setAttribute(...attr);
    });
    contentList.forEach((content) => {
        if (content.length === 1) {
            element.appendChild(document.createTextNode(content[0]));
        } else {
            element.appendChild(createNewElement(...content));
        }
    });
    return element;
  }

  function createRoomCard(data) {
    return createNewElement("div", [["class", "rooms__item-wrapper"], ["id", "rooms__item-wrapper"]], [
      ["picture", [], [
        ["img", [
          ["class", "rooms__image"], 
          ["src", `img/${data.img}`],
          ["alt", "Room image"] 
        ], []]
      ]],
      ["ul", [["class", "rooms__item"]], [
        ["li", [], [
          ["h2", [["class", "rooms__item-heading"]], [[data.name]]],
        ]],
        ["li", [["class", "rooms__item-description"]], [
          ["p", [["class", "rooms__item-description--list"]], [
            ["sup", [["class", "rooms__item-description--dollar"]], [["$"]]],
            ["span", [["class", "rooms__item-price"]], [[data.price]]],
            ["sub", [], [["/per night"]]]
          ]]
         ]]
       ]]
    ]);
  }

Demandé el 26 de Janvier, 2020 par dinmep

Answer 1

1 Réponses

Answer 2

1voto

Rkv88 - Kanyan Points 1302

Vous pouvez utiliser le plugin pagination.js pour jquery exemples ici https://pagination.js.org

mettre les données dans DATA_SOURCE puis appeler .pagination sur l'élément avec la liste d'id je mets 5 éléments par page ici pageSize:5 J'ai ensuite créé un modèle personnalisé pour chaque élément en utilisant __createRoomCard fonction

function __createRoomCard(data){

       for (var i = 0, len = data.length; i < len; i++) {
            data[i]=`<div class="rooms__item-wrapper" id="rooms__item-wrapper"><picture><img class="rooms__image" src="img/${data[i].img}" alt="Room image"></picture><ul class="rooms__item"><li><h2 class="rooms__item-heading">${data[i].name}</h2></li><li class="rooms__item-description"><p class="rooms__item-description--list"><sup class="rooms__item-description--dollar">$</sup><span class="rooms__item-price">${data[i].price}</span>_{/per night}</p></li></ul>`;
        }

        return data.join("");
  }
  $(document).ready(function(){

 DATA_SOURCE= [
 {img:'room1.jpg',price:22,name:'Card1'},{img:'room2.jpg',price:100,name:'Card2'},{img:'room3.jpg',price:55,name:'Card3'},
{img:'room1.jpg',price:22,name:'Card1'},{img:'room2.jpg',price:100,name:'Card2'},{img:'room3.jpg',price:55,name:'Card3'}];

  $('#list').pagination({
    dataSource: DATA_SOURCE,
    pageSize: 5, //here put number of items per page
    callback: function(data, pagination) {
        // template method of yourself
        var html = __createRoomCard(data);
        $('#Z').html(html);
    }
})

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://pagination.js.org/dist/2.1.5/pagination.min.js"></script>
<body>
<div id="list" ></div>
<div id="Z">Loading...</div>
</body>

Répondu el 26 de Janvier, 2020 par Rkv88 - Kanyan (1302 Points )

comment je peux réutiliser une fonction

Réponse

Questions en vedette

Top Tags

Prograide.com

Powered by:

comment je peux réutiliser une fonction

Réponse

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: