Simple jQuery Sorting & Filtering Plugin - simpleSort

simpleSort is a simple lightweight jQuery plugin for sorting & filtering elements depended on Html5 data-* attributes.

How to use it:

1. Load jQuery library and the simpleSort.js script at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="simpleSort.js"></script>

2. Create controls to sort & filter elements.

<button id="sort">Sort</button>  
<input type="text" id="name-filter" placeholder="Filter by name">
<input type="text" id="description-filter" placeholder="Filter by description">

3. Wrap your elements with data-* attributes to be sorted & filtered into a parent container.

<div class="demo">

  <div data-description="Descrption 1."
       data-name="Name 1">
    ...
  </div>
  
  <div data-description="Descrption 2."
       data-name="Name 2">
    ...
  </div>
  
  <div data-description="Descrption 3."
       data-name="Name 3">
    ...
  </div>
  
  ...
 
</div>

4. Enable the plugin.

$(document).ready( function() {

  var test = new simpleSort('.demo', 'div');

  $('#ss-sort').on('click', function() {

    // toggle sort
    if(test.order === 'desc') {
      test.sort('data-name', 'asc');
    } else {
      test.sort('data-name', 'desc');
    }

  });

  
  // name filter
  $('#name-filter').on('propertychange change keyup paste input mouseup', function() {
    test.filter('data-name', $(this).val());
  });
  
  // description filter
  $('#description-filter').on('propertychange change keyup paste input mouseup', function() {
    test.filter('data-description', $(this).val());
  });  

}); 

---

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