时间戳

首页 > 解决方案 > 使用 jquery 分页插件进行分页

javascript - 使用 jquery 分页插件进行分页

问题描述

我在理解 jQuery Pagination 插件时遇到了一些问题。这是我第一次使用它。在我上一个问题上，一个人向我提供了这个解决方案，但我无法让它为我工作；我不明白为什么每个下一个房间都进入前一个房间。这是一张照片

在此处输入图像描述 在此处输入图像描述

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><sub>/per night</sub></p></li>
        </ul>`;
  }
  return data.join("");
}

$(document).ready(function() {
  DATA_SOURCE = [{
    img: 'rooms_img_1.jpg',
    price: 125,
    name: 'Single Room'
  }, {
    img: 'rooms_img_2.jpg',
    price: 240,
    name: 'Standart Room'
  }, {
    img: 'rooms_img_3.jpg',
    price: 325,
    name: 'Double Room'
  }, {
    img: 'rooms_img_4.jpg',
    price: 450,
    name: 'Family Room'
  }, {
    img: 'rooms_img_5.jpg',
    price: 500,
    name: 'VIP Room'
  }, {
    img: 'rooms_img_6.jpg',
    price: 600,
    name: 'Suite'
  }]

  $('#list').pagination({
    dataSource: DATA_SOURCE,
    pageSize: 3, //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>
<div id="Z">Loading...</div>
<div id="list"></div>

标签： javascriptjquery

解决方案

嗨，我的朋友，请 像这样在data[i]</div> 末尾 添加

</ul></div>

推荐阅读