带有多个复选框过滤器和滑块的同位素分页

Question

我如何实现分页，请在此处检查小提琴

$(function () {
    var $container = $('.grid'),
        weightSlider = document.getElementById('weight-slider'),
        sizeSlider = document.getElementById('size-slider'),
        $weightFrom = $('.weight-from'),
        $weightTo = $('.weight-to'),
        $sizeFrom = $('.size-from'),
        $sizeTo = $('.size-to'),
        sizeArray = ['1a', '1b', '1c', '1d', '2a', '2b', '2c', '2d', '3a', '3b'],
        filters = {},
        comboFilter;

    noUiSlider.create(weightSlider, {
        start: [23, 27],
        connect: true,
        step: 1,
        range: {
            'min': 15,
            'max': 30
        }
    });
    
    noUiSlider.create(sizeSlider, {
        start: [0, 9],
        step: 1,
        connect: true,
        range: {
            'min': 0,
            'max': 9
        }
    });

    weightSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? $weightTo : $weightFrom).text(parseInt(values[handle]));
        $container.isotope({
            filter: multipleFilter
        });
    });

    sizeSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? $sizeTo : $sizeFrom).text(sizeArray[+values[handle]]);
        $container.isotope({
            filter: multipleFilter
        });
    });

    $container.isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: '.grid-item',
            gutter: 15
        },
        filter: multipleFilter
    });

    // do stuff when checkbox change
    $('#options').on('change', function (jQEvent) {
        var $checkbox = $(jQEvent.target);
        manageCheckbox($checkbox);
        comboFilter = getComboFilter(filters);
        $container.isotope({
            filter: multipleFilter
        });
    });

    function multipleFilter() {
        var that = this;

        function checkWeight() {
            var weight = $(that).find('.weight').text();
            weightFrom = parseInt($weightFrom.text()) || 0;
            weightTo = parseInt($weightTo.text()) || 0;

            weight = parseInt(weight) || 0;

            return weight >= weightFrom && weight <= weightTo;
        }

        function checkSize() {
            var size = sizeArray.indexOf($(that).find('.size').text()),
                sizeFrom = sizeArray.indexOf($sizeFrom.text()),
                sizeTo = sizeArray.indexOf($sizeTo.text());

            return size >= sizeFrom && size <= sizeTo;
        }

        return checkWeight() && checkSize() && $(this).is(comboFilter || '*');
    }

    function getComboFilter(filters) {
        var i = 0;
        var comboFilters = [];
        var message = [];
        for (var prop in filters) {
            message.push(filters[prop].join(' '));
            var filterGroup = filters[prop];
            // skip to next filter group if it doesn't have any values
            if (!filterGroup.length) {
                continue;
            }
            if (i === 0) {
                // copy to new array
                comboFilters = filterGroup.slice(0);
            } else {
                var filterSelectors = [];
                // copy to fresh array
                var groupCombo = comboFilters.slice(0); // [ A, B ]
                // merge filter Groups
                for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
                    for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
                        filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
                    }
                }
                // apply filter selectors to combo filters for next group
                comboFilters = filterSelectors;
            }
            i++;
        }
        var comboFilter = comboFilters.join(', ');
        return comboFilter;
    }

    function manageCheckbox($checkbox) {
        var checkbox = $checkbox[0];
        var group = $checkbox.parents('.option-set').attr('data-group');
        // create array for filter group, if not there yet
        var filterGroup = filters[group];
        if (!filterGroup) {
            filterGroup = filters[group] = [];
        }
        var isAll = $checkbox.hasClass('all');
        // reset filter group if the all box was checked
        if (isAll) {
            delete filters[group];
            if (!checkbox.checked) {
                checkbox.checked = 'checked';
            }
        }
        // index of
        var index = $.inArray(checkbox.value, filterGroup);
        if (checkbox.checked) {
            var selector = isAll ? 'input' : 'input.all';
            $checkbox.siblings(selector).removeAttr('checked');
            if (!isAll && index === -1) {
                // add filter to group
                filters[group].push(checkbox.value);
            }
        } else if (!isAll) {
            // remove filter from group
            filters[group].splice(index, 1);
            // if unchecked the last box, check the all
            if (!$checkbox.siblings('[checked]').length) {
                $checkbox.siblings('input.all').attr('checked', 'checked');
            }
        }
    }
});

.grid {
  margin-top: 50px;
}

.grid-item {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #E14D38;
  background: #E14D38;
  margin-bottom: 15px;
  
  &.green {
    border-color: #068B32;
    background: #068B32;
  }
  &.blue {
    border-color: #176DEE;
    background: #176DEE;
  }
  &.rounded {
    border-radius: 50%;
  }

  .weight,
  .size {
    position: absolute;
    width: 30%;
    padding: 15% 0;
    margin: 0;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    font: bold 12px/0 Arial;
  }

  .weight {
    top: 0;
    left: 0;
    background: #595959;
    color: #fff;
  }

  .size {
    bottom: 0;
    right: 0;
    width: 40%;
    padding: 20% 0;
    background: #FFBA04;
  }
}

.weight-from,
.weight-to,
.size-from,
.size-to {
  display: inline-block;
  width: 30px;
  border-radius: 50%;
  line-height: 0;
  padding: 15px 0;
  text-align: center;
}

.weight-from,
.weight-to {
  background: #595959;
  color: #fff;
}
.size-from,
.size-to {
  background: #FFBA04;
  color: #000;
}

.weight-slider {
  .noUi-connect {
    background: #595959;
    
  }
}

.size-slider {
  .noUi-connect {
    background: #FFBA04;
    
  }
}

.noUi-handle {
  border-color: #BCBCBC;
  &:before,
  &:after {
    background: #BCBCBC;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>

<script src="https://rawgit.com/leongersen/noUiSlider/master/distribute/nouislider.min.js"></script>

<link rel="stylesheet" href="https://rawgit.com/leongersen/noUiSlider/master/distribute/nouislider.min.css" />
<h3>Вес</h3>

<div id="weight-slider" class="weight-slider"></div>
<p> <span class="weight-from"></span>-<span class="weight-to"></span>

</p>
 <h3>Размер</h3>

<div id="size-slider" class="size-slider"></div>
<p> <span class="size-from"></span>-<span class="size-to"></span>

</p>
 <h3>Тип</h3>

<div id="options">
    <div class="option-set" data-group="color">
        <input type="checkbox" value="" id="color-all" class="all" checked />
        <label for="color-all">all brands</label>
        <input type="checkbox" value=".green" id="green" />
        <label for="green">green</label>
        <input type="checkbox" value=".red" id="red" />
        <label for="red">red</label>
        <input type="checkbox" value=".blue" id="blue" />
        <label for="blue">blue</label>
    </div>
    <div class="option-set" data-group="type">
        <input type="checkbox" value="" id="type-all" class="all" checked />
        <label for="type-all">all types</label>
        <input type="checkbox" value=".rounded" id="rounded" />
        <label for="rounded">rounded</label>
        <input type="checkbox" value=".square" id="square" />
        <label for="square">square</label>
    </div>
</div>
<div class="grid">
    <div class="grid-item red rounded">
        <p class="weight">21</p>
        <p class="size">1b</p>
    </div>
    <div class="grid-item red square">
        <p class="weight">24</p>
        <p class="size">1a</p>
    </div>
    <div class="grid-item green rounded">
        <p class="weight">25</p>
        <p class="size">2b</p>
    </div>
    <div class="grid-item blue rounded">
        <p class="weight">26</p>
        <p class="size">1c</p>
    </div>
    <div class="grid-item green square">
        <p class="weight">21</p>
        <p class="size">3b</p>
    </div>
    <div class="grid-item green square">
        <p class="weight">28</p>
        <p class="size">1d</p>
    </div>
    <div class="grid-item blue rounded">
        <p class="weight">29</p>
        <p class="size">2c</p>
    </div>
    <div class="grid-item blue square">
        <p class="weight">30</p>
        <p class="size">2d</p>
    </div>
    <div class="grid-item red rounded">
        <p class="weight">22</p>
        <p class="size">3a</p>
    </div>
    <div class="grid-item blue rounded">
        <p class="weight">22</p>
        <p class="size">2a</p>
    </div>
    <div class="grid-item green square">
        <p class="weight">23</p>
        <p class="size">1b</p>
    </div>
    <div class="grid-item blue square">
        <p class="weight">24</p>
        <p class="size">2c</p>
    </div>
    <div class="grid-item blue rounded">
        <p class="weight">25</p>
        <p class="size">3b</p>
    </div>
    <div class="grid-item red square">
        <p class="weight">26</p>
        <p class="size">1d</p>
    </div>
</div>

也请帮助我进行分页小提琴https://jsfiddle.net/gw65vrj2/ 我已经尝试了很多同位素分页脚本，但是我无法使它与分页一起使用。 请让我知道，我该怎么做。我正在查看https://jsfiddle.net/acr8pk01/2/，但不确定如何在我的工作脚本中实现这一点。