Filtering and sorting in JS using the MixItUp library

MixItUp is a high performance, no dependency library for animated DOM manipulation that gives you the ability to filter, sort, add and remove DOM elements with beautiful animation.

MixItUp blends beautifully with your existing HTML and CSS, making it a great choice for responsive layouts. The library is compatible with inline-flow, percentages, media queries, flexbox and more.

Beginning of work
Most often, MixItUp is applied to container or target elements, which can be a portfolio of projects, a list of blog posts, a selection of products, or any kind of user interface where filtering and / or sorting would be useful.

Assembling the container
By default, MixItUp will ask the container for a target that matches the .mix selector.

<div class="container">
    <div class="mix category-a" data-order="1"></div>
    <div class="mix category-b" data-order="2"></div>
    <div class="mix category-b category-c" data-order="3"></div>
    <div class="mix category-a category-d" data-order="4"></div>
</div>

Targets can be filtered using any valid selector such as .category-a and sorted using optional custom data attributes such as data-order.

Control

One way of filtering and sorting happens when the controls are clicked. You can use any clickable element as a control, but is recommended for convenience. Filter controls are requested based on the presence of a data filter attribute whose value must be all, none, or a valid selector string such as .Category.

<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".category-a">Category A</button>
<button type="button" data-filter=".category-b">Category B</button>
<button type="button" data-filter=".category-c">Category C</button>

Sort control

Sort controls are requested based on the presence of the data-sort attribute, whose value takes the form of a sort string consisting of the name of the attribute to sort, followed by an optional colon-separated sort order, for example, ‘order’, ‘order: asc’, ‘order : desc ‘.

<button type="button" data-sort="order:asc">Ascending</button>
<button type="button" data-sort="order:descending">Descending</button>
<button type="button" data-sort="random">Random</button>

The values ​​default and random are also valid, with default referring to the original order of the target elements in the DOM at the time the mixer is instantiated.

Styling a container

While MixItUp can be added on top of any existing CSS layout, it is recommended that you use flexbox-based styles for floats and legacy grid frames when working with grid designs for a number of reasons.

Download MixItUp

First, download the MixItUp JavaScript library using the preferred method for your project. The easiest way to load MixItUp into your project is to include it through the </script> tag before the closing </body> tag on your page. You can download the script on the official website. In the folder you will find examples of using the MixItUp library with different settings.

   ...
        <script src="/path/to/mixitup.min.js"></script>
    </body>
</html>

With this method, the MixItUp library function will be available through the global variable mixitup.

Import module

If you are building a JavaScript modular project using Webpack, Browserify, or RequireJS, MixItUp can be installed using a package manager of your choice (e.g. npm, jspm, yarn) and then imported into any of your project’s modules.

npm install mixitup --save

// ES2015
import mixitup from 'mixitup';

// CommonJS
var mixitup = require('mixitup');

// AMD
require(['mixitup'], function(mixitup) {
});

Creating a mixer

With the mixitup () library function available, you can now create a mixer in your container to enable the MixItUp function. Call the library function, passing in a selector string or a reference to a container element as the first parameter, and a newly created mixer instance will be returned.

Creating a mixer using a selector string:

var mixer = mixitup('.container');

Creating a mixer with a link to an item:

var mixer = mixitup(containerEl);

Your mixer is now ready to interact through the controls (see above) or API (see the mixer API methods in the documentation). Click the control or call an API method to verify that everything is working correctly.

Configuration

If you want to customize the functionality of your mixer, an optional configuration object can be passed as the second parameter to the mixitup function. If no configuration object is passed, the default settings will be used.

Passing a config object:

var mixer = mixitup(containerEl, {
    selectors: {
        target: '.blog-item'
    },
    animation: {
        duration: 300
    }
});

API usage

If you want to interact with your mixer through its API, the mixer reference returned by the library function can be used to call API methods.

API method call:

var mixer = mixitup(containerEl);
mixer.filter('.category-a');

You can also use the new MixItUp dataset API. The dataset is intended for use in API-based JavaScript applications and can be used in place of DOM-based methods like .filter (), .sort (), .insert (), etc. When used, insertion, deletion, sorting and pagination can be achieved solely through changes to your data model, without the need to interact with or directly query the DOM.