Question

我在我的项目中使用MixItUp有一个主页与我的项目，我想要一个分页，我看到该插件实际上支持分页但我无法使其工作。

这是我的尝试：

标记：

<div id="main">
        <div class="container" id="Container">

            <div class="row">

                <div class="col-md-3 mix clip">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Videoclip</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix adv">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Advertising</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix reportage">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Reportage</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix clip">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Videoclip</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix adv">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Advertising</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix reportage">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Reportage</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix clip">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Videoclip</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix adv">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Advertising</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix reportage">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Videoclip</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix clip">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Videoclip</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix adv">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Advertising</p>
                        </div>
                    </div>    
                </div>

                <div class="col-md-3 mix reportage">
                    <div class="item">
                        <img src="http://placehold.it/300x200" class="img-responsive" alt="">
                        <div class="caption">
                            <h1>Title</h1>
                            <p>Reportage</p>
                        </div>
                    </div>    
                </div>

            </div> <!-- end row -->
        </div> <!-- end container -->
    </div> <!-- end main -->

正如您所看到的那样，插件可以正常使用过滤器，但分页甚至没有显示。在插件的文档中有一个专门用于分页的部分，虽然演示示例不存在，所以我不能将它用作起始工作点。

您可以在此处查看文档：{{3}}

我按照说明使用了这个JS代码：

$('#Container').mixItUp({
    pagination: {
        generatePagers: true,
        prevButtonHTML: '«',
        nextButtonHTML: '»'
    }
});

我在文档中说明了emtpy div的标记：

<div class="pager-list">
    <!-- Pagination buttons will be generated here -->
</div>

什么都没发生。

有人能指出我正确的方向，我不知道如何继续解决这个问题，插件似乎支持分页，所以我希望能实现这一目标。谢谢，任何建议都非常感谢。

Answer 1

也许你的问题与helpchrisplz类似。 https://mixitup.kunkalabs.com/support/topic/pagination-not-working/#post-1547

这是他笔的固定版本： http://codepen.io/philard/pen/myGEk

首先确保在配置对象中将控件保留为默认值（true）。其次，与分页控件和selectors.filter的默认值存在冲突。因此，将所有过滤器按钮的类和selectors.filter设置为类似“filter-btn”的类。

所以你的javascript最终会像这样：

$('#Container').mixItUp(
{   
    controls: { enable: true },
    selectors: { filter: 'filter-btn' },
    pagination: { limit: 10 }
});

您的过滤器按钮可能如下所示：

<button class="filter-btn" data-filter=".clip">clip classes</button>

Answer 2

分页是您必须以15美元购买的延期。

https://mixitup.kunkalabs.com/extensions/

MixItUp Pagination无法正常工作

2 个答案: