MixItUp Pagination not working

Question

I'm using MixItUp in my project to have an homepage with my items, and I want a pagination, i saw that the plugin actually supports pagination but I couldn't make it work.

Here is my attempt:

Markup:

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

As you can see the plugin is working fine with filters, but the pagination is not even showing. In the plugin's documentation there's a section dedicated to pagination, although the demo example is not there, so i can't use it as a starting working point.

You can take a look at the documentation here: https://mixitup.kunkalabs.com/extensions/pagination

I followed the instructions and used this JS code:

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

I put in the markup the emtpy div as stated in the docs:

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

Nothing happens.

Can someone point me in the right direction, I don't know how to go on solving this problem, the plugin seems to support pagination, so I'm hoping to achieve that. Thanks, any suggestion is much appreciated.

Answer 1

Pagination is an extension that you have to purchase for $15.

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

Answer 2

Maybe your problems are similar to helpchrisplz here. https://mixitup.kunkalabs.com/support/topic/pagination-not-working/#post-1547

Here is a fixed version of his pen: http://codepen.io/philard/pen/myGEk

First make sure in your Configuration Object that controls is left as default (true). Secondly there is a conflict with the pagination controls and the selectors.filter's default value. So set the class of all your filter buttons and the selectors.filter to something like "filter-btn" instead.

So your javascript may end up like this:

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

And your filter buttons may look like this:

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