在主页上的特色产品处添加分页（X-Cart）答案

【问题标题】：Add pagination at Featured Products on homepage (X-Cart)在主页上的特色产品处添加分页（X-Cart）
【发布时间】：2015-06-08 03:39:08
【问题描述】：

我正在使用 x-cart 网站，我有一个问题是如何为主页上的特色产品添加分页？我希望它的过程是这样的，如果用户点击下一步按钮，它将显示其他特色产品（在这种情况下，它仍然停留在主页上）。有可能吗？

我正在等待您的答复。

【问题讨论】：

标签： pagination x-cart

【解决方案1】：

这取决于您的模板，但假设您的特色产品以这种方式显示：

<div id="products">
    <div class="product-item product-item-odd">...</div>
    <div class="product-item product-item-even">...</div>
    <div class="product-item product-item-odd">...</div>
    <div class="product-item product-item-even">...</div>
    ...
</div>

你可以使用 jQuery（这在 x-Cart 中可能是旧的）来分页：

function paginate(container, max) {
    var items = container.children();
    var totalItems = items.length;
    var totalPages = Math.ceil(totalItems / max);
    var pager = $('<p class="my_pager"></p>');
    for (p = 1; p <= totalPages; p++) {
        pager.append('<span class="open_page">' + p + '</span>');
        items.slice((p - 1) * max, p * max).attr('data-page', p);
    };
    container.after(pager);
    $('.open_page').click(function (e) {
        $('.open_page').removeClass('active');
        $(this).addClass('active');
        var pageToOpen = $(this).text();
        items.hide();
        items.filter('[data-page=' + pageToOpen + ']').show();
    });
    $('.open_page:first').click();
};
paginate($('#products'), 2);

Fiddle example

【讨论】：