MixItUp Pagination not working

Posted by pwnjack on Stack Overflow See other posts from Stack Overflow or by pwnjack
Published on 2014-05-27T15:59:55Z Indexed on 2014/06/05 15:25 UTC
Read the original article Hit count: 536

Filed under:
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about plugins