MixItUp分页不工作

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 -->

正如你所看到的，这个插件可以很好的使用过滤器，但是分页甚至没有显示出来。在插件的文档中，有一个专门讨论分页的部分，尽管演示示例还没有出现，所以我不能使用它作为工作起点。

您可以在这里查看文档：https://mixitup.kunkalabs.com/extensions/pagination

我按照说明使用了以下JS代码：

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

我在标记中添加了emtpy div，如文档中所述：

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

什么都没发生。

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

Answer 1

分页是一个扩展，您必须购买15美元。

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

Answer 2

也许你的问题和这里的帮助很相似。https://mixitup.kunkalabs.com/support/topic/pagination-not-working/#post-1547

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

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

所以您的javascript可能会以这样的方式结束：

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

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

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