Sorting allows us to change the order of target elements in a MixItUp container. This tutorial will discuss the various sorting techniques available in MixItUp 3.
Control buttons provide an easy way of building sorting UI, and allow for sorting either by the default order of targets in the DOM, or by the value of attributes present on targets.
Sort controls are queried by MixItUp on instantiation based on the presence of a
data-sort attribute in their markup, and bound for click events. The value of each control's
data-sort attribute (or "sort string", defines the control's sorting behavior, and is made up of an "attribute" component and an optional "order" component, or the string
The possible values of the order component are
':desc'. If the order component is omitted, ascending order will be used by default.
The following examples illustrate some possible sort strings:
Sorting by Default
The default order is the order that targets are found in the DOM when MixItUp is instantiated and targets are indexed. This equates to the sort string
'default:asc'. If we want to reverse the default order, we can use the value
You may use any clickable element as a control button, but
<button type="button"> is recommended for accessibility, as it allows for easy keyboard control of your UI.
Sorting by Attribute
To sort our targets according to specific values, we can reference a custom data attribute in the attribute component of the sort string. In this case,
As can be seen in the above example, when we reference a custom data attribute, the initial
'data-' segment of the attribute name is omitted for brevity.
When adding custom sorting attributes to your targets' markup, ensure that all attributes are present on all targets in your container.
Sorting by Multiple Attributes
Multiple sorting attributes can be added to targets as required, enabling users to sort content by a variety of attributes and orders.
We can also then sort content by multiple attributes simultaneously, with multiple space-separated sort strings:
The above control would result in sorting firstly by price in descending order, and then by name in ascending order.
These types of sort strings are particularly useful when multiple targets in the container share the same value for one or more sort attributes, and can be used to ensure that sorting always results in a meaningful, readable order.
The following demo shows sorting by
published-date, then by
Sort controls are completely optional and in many cases, you may wish to build your own user interface to control a MixItUp instance. In these instances, we can use the
.sort() API method to interface with our mixer.
.sort() method can be used in a variety of different ways. The most common way is to send a sort string, just as you would use with a sort control.
.sort() method returns a promise which resolves when the sorting animation ends.
Alternatively, you can provide the
.sort() method with an array of elements, representing your final intended order.
This allows you to sort targets using your own custom code, before passing the final array to MixItUp.