Filter & Sort A Group Of Elements Using jQuery Drizzle Plugin

File Size: 24.4 KB
Views Total: 1696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Filter & Sort A Group Of Elements Using jQuery Drizzle Plugin

Drizzle is a small, fast, high-performance jQuery sorting & filtering plugin for narrowing and resorting larget sets of data on the webpage.

Main features:

  • Filter by CSS class.
  • Filter by CSS ID.
  • Filter by HTML Data attribute.
  • Sort by number.
  • Sort by alphabets.

How to use it:

1. Download and insert the minified version of the jQuery Drizzle plugin after the latest jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/drizzle.min.js"></script>

2. Categorize your data set using CSS class/ID or HTML data attribute as follows:

<ul class="demo">
  <li class="class-1">Item 1</li>
  <li>Item 2></li>
  <li class="class-1">Item 3</li>

<ul class="demo">
  <li id="id-1">Item 1</li>
  <li>Item 2></li>
  <li id="id-1">Item 3</li>

<ul class="demo">
  <li data-role="1">Item 1</li>
  <li>Item 2></li>
  <li data-role="1">Item 3</li>

3. Initialize the Drizzle plugin.

var instance = $('ul.demo').drizzle({
    child:'li' // child element

4. Filter through the HTML list.

// filter by class

// filter by id

// filter by data attribute

5. Sort the HTML list.

instance.sort('.class', {
  order: 'desc' // or asc

instance.sort('#id', {
  order: 'asc'

instance.sort('[data-role]', {
  order: 'desc'

instance.sort('[data-number]', {
  order: 'desc',
  isNumber: true // default: false

6. Reset the HTML list.

// or
// or

This awesome jQuery plugin is developed by anishnair02. For more Advanced Usages, please check the demo page or visit the official website.