Pagination about mixitup HOT 11 CLOSED

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();
        }
      });

        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>

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

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