Filter & Sort A Group Of Elements Using jQuery Drizzle Plugin
File Size: | 24.4 KB |
---|---|
Views Total: | 1867 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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> <ul class="demo"> <li id="id-1">Item 1</li> <li>Item 2></li> <li id="id-1">Item 3</li> ... </ul> <ul class="demo"> <li data-role="1">Item 1</li> <li>Item 2></li> <li data-role="1">Item 3</li> ... </ul>
3. Initialize the Drizzle plugin.
var instance = $('ul.demo').drizzle({ child:'li' // child element });
4. Filter through the HTML list.
// filter by class instance.filter('.class-1'); // filter by id instance.filter('#id-1'); // filter by data attribute instance.filter('[data-role="1"]');
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.
instance.unfilter(); // or instance.rain(); // or instance.filter('*')
This awesome jQuery plugin is developed by anishnair02. For more Advanced Usages, please check the demo page or visit the official website.