Pagination

[pkhodaveissi]

Is pagination supported too?

If not, are you planning for it?

thanks in advance

[lukewatts]

They said they were hoping to develop a pagination feature...but that was 4 months ago. #8

No response since, however, Barrel / Patrick are possibly planning a complete rewrite of MixItUp for v2 and perhaps pagination will begin development then. #36

Hopefully, I'm also in need of this feature.

[zoerooney]

I was just able to get pagination working with jPages after much trial and error. I've only tested a bit but it does seem to be working both across filtering and sorting. Here's what I'm using:

var pagination = $('.pagination');

          function setPagination () {
              pagination.jPages({
                  containerID: 'grid',
                  perPage : 12,
                  first: false,
                  last: false
              });
          };

          function destroyPagination () {
              pagination.jPages('destroy');
          };

          setPagination();


      $('#grid').mixitup({
        targetSelector: '.item',
        targetDisplayGrid: 'inline-block',
        animateGridList: false,
        onMixLoad: function(){
            setPagination();
        },
        onMixStart: function(){
            destroyPagination();
        },
        onMixEnd: function(){
            setPagination();
        }
      });

[dholzman]

I tried this and could not get it to work. Something must be wrong in my html (or the javascript. Here is what I have:
(ignore the missing carrots...I am new to github and it kept showing my html as a bulleted list)

div class="pagination" /div
ul id="container"
li.../li
li.../li
/ul

var pagination = $('.pagination');

        function setPagination() {
            pagination.jPages({
              containerID: 'container',
              perPage : 12,
              first: false,
              last: false
          });
      };
      function destroyPagination () {
          pagination.jPages('destroy');
      };

      setPagination();

        $(function(){   
            // INSTANTIATE MIXITUP
            $('#container').mixitup({
                layoutMode: 'list', // Start in list mode (display: block) by default
                listClass: 'list', // Container class for when in list mode
                gridClass: 'grid', // Container class for when in grid mode
                effects: ['fade','blur'], // List of effects 
                listEffects: ['fade','rotateX'], // List of effects ONLY for list mode
                onMixLoad: function(){setPagination();},
                onMixStart: function(){destroyPagination();},
                onMixEnd: function(){setPagination();}
            });

            // HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING
            var $filters = $('#Filters').find('li'),
                dimensions = {
                    service: 'all', // Create string for first dimension
                    topics: 'all' // Create string for second dimension
                };

            // Bind checkbox click handlers:
            $filters.on('click',function(){ 
                var $t = $(this),
                    dimension = $t.attr('data-dimension'),
                    filter = $t.attr('data-filter'),
                    filterString = dimensions[dimension];

                if(filter == 'all'){
                    // If "all"
                    if(!$t.hasClass('active')){
                        // if unchecked, check "all" and uncheck all other active filters
                        $t.addClass('active').siblings().removeClass('active');
                        // Replace entire string with "all"
                        filterString = 'all';   
                    } else {
                        // Uncheck
                        $t.removeClass('active');
                        // Emtpy string
                        filterString = '';
                    }
                } else {
                    // Else, uncheck "all"
                    $t.siblings('[data-filter="all"]').removeClass('active');
                    // Remove "all" from string
                    filterString = filterString.replace('all','');
                    if(!$t.hasClass('active')){
                        // Check checkbox
                        $t.addClass('active');
                        // Append filter to string
                        filterString = filterString == '' ? filter : filterString+' '+filter;
                    } else {
                        // Uncheck
                        $t.removeClass('active');
                        // Remove filter and preceeding space from string with RegEx
                        var re = new RegExp('(\\s|^)'+filter);
                        filterString = filterString.replace(re,'');
                    };

                };

                // Set demension with filterString
                dimensions[dimension] = filterString;

                // We now have three strings containing the filter arguments for each dimension:    
                console.info('dimension 1: '+dimensions.service);
                console.info('dimension 2: '+dimensions.topics);

                /*
                *   In this case, MixItUp will show elements using OR logic within each dimension and
                *   AND logic between dimensions. At least one dimension must pass for the element to show.
                */
                $('#container').mixitup('filter',[dimensions.service, dimensions.topics])
            }); 
    })
    </script>

The CSS is just the stock css from jpages at the moment (figured I would try and get it to work before I made it look how I wanted). Any help with where I have gone wrong would be greatly appreciated.

[zoerooney]

I haven't used the checkbox code but my guess is you need to include this piece:

onMixLoad: function(){setPagination();},
onMixStart: function(){destroyPagination();},
onMixEnd: function(){setPagination();}

In your second .mixitup at the bottom of your code. This one:

$('#container').mixitup('filter',[dimensions.service, dimensions.topics])

I think that last one above also needs a semicolon at the end. Without a link it's going to be next to impossible to troubleshoot your specific code/ implementation since there could be lots of other issues starting with errors on down.

[dholzman]

Hmm. Not quite sure how that would work. Isn't that code at the bottom just setting up what the filters will be and then initializing mixitup? You can see this the actual page at http://testsite.alliedbizgroup.com/resources/publications.html. I have removed all of the jpages related information at present because when I added it, mixitup stopped working altogether. Hopefully you can take a look at the "clean" code and direct me how to incorporate the jpages. THANKS!

[zoerooney]

Sorry, I don't have time to do this for you. Like I said, I think you need to add those callbacks to the last part where you're initializing mixitup again.

[maplesyrupsucker]

@zoerooney Thanks for the lead on pagination, managed to get it to work with mixitup & wordpress. Just gotta cross browser test it, but I think I'm in the clear.

[maplesyrupsucker]

@zoerooney Did you by chance have any issues with MixItUp doing some heavy fadein's on each pagination page change? Were you able to tell mixitup to dial down the animations when the user clicks "next page"?

[zoerooney]

@corbinfraser This is where I'm using the combo: http://shop.laboiteny.com/collections/spices It's definitely animation-heavy, but the client was ok with the results so I didn't make any modifications.

[maplesyrupsucker]

Thanks for the link. This helps a lot, can't thank you enough. Great site
btw!

On Wed, Nov 20, 2013 at 2:25 PM, Zoe Rooney notifications@github.comwrote:

@corbinfraser https://github.com/corbinfraser This is where I'm using
the combo: http://shop.laboiteny.com/collections/spices It's definitely
animation-heavy, but the client was ok with the results so I didn't make
any modifications.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/39#issuecomment-28927486
.

---

Corbin Fraser
Co-Founder
Command Base Creative Design Inc. http://commandbase.ca/
Telephone: 306.216.0884 | Email: corbin@commandbase.ca | Web:
www.commandbase.ca http://commandbase.ca/

---

[kseniamaslennikova]

Zoe, thank you a lot for a hint in finding solution for this issue! Thanks to you I could mix JPages and MixItUp too!