It is easy to add search input and sort buttons with just a few classes and attributes in your HTML. ‘Automagical’ because List.js registers the event handlers, searches/sorts and updates the list for you:
class String. *required
The default class search is how List.js finds your writable search field. If you change it also set options.searchClass.
Alternatively, using fuzzy-search here will switch to the Fuzzy Search function.
type String. *required
The default input type search is similar to using text, but web browsers may render it slightly differently: see https://developer.mozilla.org/.../input/search. Either type will work with List.js.
<input type="search" class="search" placeholder="normal search"> or
<input type="search" class="fuzzy-search" placeholder="fuzzy search!">
class String. *required
The default class sort is how List.js finds clickable sort buttons. If you change it also set options.sortClass.
data-sort String. *required
This attribute on a clickable sort button should match the column name passed to List.js in options.valueNames.
data-order String
Set to asc or desc to enforce that sorting order for a column. The user won't be able to change the order, and any data-default-order attribute is ignored.
data-default-order String, default: "asc"
Set to desc to change the initial sorting order for a column. Subsequent clicks will toggle the sorting order between ascending/descending, as usual.
data-insensitive Boolean, default: true
Set to false for case-sensitive sorting of that column.
Sort by:
<span class='sort' data-sort='name'>Name</span> or
<span class='sort' data-sort='born' data-default-order='desc'>Born in Year</span> or
<span class='sort' data-sort='city'>City</span>
The CSS classes asc and desc are added when a sort button is clicked on, so List.js can show which column is currently sorted. For example, using this CSS sets a yellow background with ⬆ or ⬇ added after the button text:
.sort.asc, .sort.desc {
background-color: yellow;
}
.sort.asc::after {
content: "\002B06";
padding-left: 3px;
}
.sort.desc::after {
content: "\002B07";
padding-left: 3px
}