过滤+分页问题

Question

我正在为我的一个项目做一些过滤和分页。我正在使用Mixitup和simplePagination来实现我的目标，即基于类别，ASC和DESC排序和分页的基本过滤。

但我似乎无法使用此代码

HTML

    <button class="sort" data-sort="random">Random</button>
    <button class="sort" data-sort="order:asc">Ascending Order</button>
    <button class="sort" data-sort="order:desc">Descending Order</button>
    <button class="filter" data-filter="all">All</button>
    <button class="filter" data-filter=".video">Ipapers</button>
    <button class="filter" data-filter=".ipaper">Video</button>

    <section id="posts" class="posts-container">
            <article class="mix post post-1 video" data-order="1">
                    <h3>An article</h3>
        <p>Article content</p>
            </article>
            <article class="mix post post-2 ipaper" data-order="2">
                    <h3>An article</h3>
        <p>Article content</p>
            </article>
            <article class="mix post post-3 ipaper" data-order="3">
                    <h3>An article</h3>
        <p>Article content</p>
            </article>
            <article class="mix post post-4 video" data-order="4">
                    <h3>An article</h3>
        <p>Article content</p>
            </article>
            <div id="posts-nav"></div>
    </section>

JS：

    <script type="text/javascript">
        $(function(){

        var items = $(".post");

        var numItems = items.length;
        var perPage = 1;

        items.slice(perPage).hide();
            $('#posts').mixItUp({
                animation: {
                    duration: 400,
                    effects: 'stagger(34ms) translateZ(460px) fade',
                    easing: 'cubic-bezier(0.39, 0.575, 0.565, 1)'
                },
                callbacks: {
                    onMixLoad: function(state){
                        //alert('MixItUp ready... do some pagination!');

                        $("#posts-nav").pagination({
                            items: numItems,
                            itemsOnPage: perPage,
                            onPageClick: function(pageNumber) {
                                var showFrom = perPage * (pageNumber - 1);
                                var showTo = showFrom + perPage;

                                items.hide() 
                                     .slice(showFrom, showTo).show();
                            }
                        });

                    }
                }
            });  
        });
    </script>

我试图在帖子加载后添加分页，这就是为什么我在mixItUp加载后尝试分页的原因。加载我的网站时会显示分页，帖子也是如此，但帖子没有编入索引，这意味着我必须先点击“下一页”，然后才能使每页的实际帖子正常工作。当我过滤分页时应该重绘/重新计算。我是以错误的方式使用回调吗？

我创建了一个小提琴，虽然我似乎无法让它工作，只在我的本地服务器上：http://jsfiddle.net/x8Lnowkz/1/