Nuanced Pumpkin Mavens

    jquery.datafilter

    1.0.0 • Public • Published

    jquery.dataFilter

    Advanced data-filter with multiple choice filtering

    Getting Started

    Install the package with bower or npm

    bower install jquery.datafilter
    npm install jquery.datafilter
    

    Include the script in your web page:

    <script src="jquery.js"></script>
    <script src="dist/datafilter.min.js"></script>
    <script>
    jQuery(function($) {
      $('div').dataFilter({
        'prop1':[1,2],
        'prop2':3,
        'prop3':[4,5] // usw...
      }).hide();
    });
    </script>
    

    Filters every item which has a data-propertey data-prop1="1 or 2" and data-prop2="3" and data-prop3="4 or 5" and hides them

    For example see this html:

    <div data-prop1="5" data-prop2="2" data-prop3="4"></div>
    <div data-prop1="2" data-prop2="5" data-prop3="4"></div>
    <div data-prop1="2" data-prop2="2" data-prop3="2"></div>
    <div data-prop1="3" data-prop2="2" data-prop3="1"></div>
    <div data-prop1="2" data-prop2="3" data-prop3="4"></div> // filtered
    <div data-prop1="5" data-prop2="5" data-prop3="3"></div>
    <div data-prop1="4" data-prop2="4" data-prop3="3"></div>
    <div data-prop1="5" data-prop2="2" data-prop3="5"></div>
    <div data-prop1="2" data-prop2="4" data-prop3="1"></div>
    <div data-prop1="1" data-prop2="3" data-prop3="5"></div> // filtered
    <div data-prop1="4" data-prop2="2" data-prop3="4"></div>
    

    You can also use a jQuery-Collection with data-properties set to use them for filtering:

    <button data-prop1="[1,2]" data-prop2="3" data-prop3="[4,5]">Click for filtering</button>
    
    $('button').click(function(){
        $('div').dataFilter( $(this) ).hide();
    });
    

    For a working example see here

    Install

    npm i jquery.datafilter

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • fuzzyma