使用 jquery 分页插件进行分页

Question

I'm having a bit of an issue understanding the jQuery Pagination plugin. This is my first time using it. On my prev question one guy offered me this solution, but I just can't make it work for me; I don't understand why each next room goes inside the previous one. Here is a pic

 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>

Answer 1

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

</ul></div>