Dynamic Search Filter Function

autumndev

Hi All,

I have a bit of code I use that allows me to dynamically create text and select filters based on input/select attributes. The reason for this is that it allows me to move the filters away form the DataTable in to their own section (I find this looks better).

Any way i use the following examples:

<input type="text" class="searchFilter" id="input" data-type='input' data-col='0'>

or

<select name="" id="select" class="searchFilter" data-type='select' data-col='2' >
    <option value=''>Search By Type</option>
</select>

(I prop could have detected the type of input..)

then i follow up with

$(document).ready(function(){
    // DataTable
   //options added in as exmaple
    var table = $('.datatable').DataTable({
        "sDom": '<"top"lp>rt<"bottom"><"clear">',
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [  5,6,7 ] } ]
    });

    //setup filters
    buildFilters(table);
});

although not shown above you can also pass in a parent element (incase there 1 more than 1 table with filtering - thinkign tabs here) and a class that you have assigned to the filter inputs/selects (defaults to .searchFilter)

fucntion:

function buildFilters(table, element, filterClass) 
{
    var searchFilters;
    if (filterClass === "undefined") {
        filterClass = ".searchFilter";
    }
    if (typeof element === "undefined") {
        searchFilters = $(filterClass);
    } else {
        searchFilters = $(element).find(filterClass);
    }
    searchFilters.each(function(){
        var t = $(this);
        var type = t.data('type'),
            col = t.data('col'),
            id = this.id;
        if (type === 'select') {
            //build options
            table.column( col ).data().unique().sort().each( function ( d, j ) {
                t.append( '<option value="'+d+'">'+d+'</option>' )
            } );
            //apply filters
            t.on( 'change', function () {
                var val = $(this).val();

                table.column( col )
                    .search( val ? '^'+$(this).val()+'$' : val, true, false )
                    .draw();
            } )
        } else {
             t.on( 'keyup change', function () {
                table
                    .column( col )
                    .search( this.value )
                    .draw();
            } );
        }
    })
}

please feel free to pick apart and provide feedback - first time doing something like this.. Also feel free to modify and use as you wish.

apologies but the mark down would not formate the JS correctly (all on one line - at least in the preview..)

daniel_r

an alternative solution would be to use my yadcf plugin, you can use the filter_container_id property for each filter in order to place it outside the table see example (third column filter) http://yadcf-showcase.appspot.com/DOM_source.html

allan

Hi,

Welcome to the forum and thanks for sharing your solution with us. Nice and simple - I like it!

at least in the preview..)

I must get around to fixing that sometime...

Allan