Dom Filter feature plugin

guanzo

I'm trying to update the look of the filtering input while keeping the default functionality. All i want to do is add a bootstrap input-group-addon glyphicon. How do i update the html but keep the existing table search, and assign it to the feature letter 'F' so that i can access it in the "dom" options. Here's what i tried so far.

$.fn.dataTable.ext.feature.push( {
        fnInit: function ( settings ){ 
            var api = new $.fn.dataTable.Api( settings );
            var id = api.table().node().id
            return `<div id="`+id+`_filter" class="dataTables_filter">
                         <div class="input-group"><input type="search" class="form-control input-sm">
                         <span class="input-group-addon">
                         <span class="glyphicon glyphicon-filter"> </span>
                         </span>
                         </div>
                         </div>`
        },
        cFeature: 'F'
    } );   

The input now looks the way i want it to, but there's no filtering going on. Do i just have to assign a listener to the input and then call search() with the input value? I feel like there's a more direct approach that can piggy back off the default search functionality.

UPDATE:

Got it working, here's the code.

$.fn.dataTable.ext.feature.push( {
        fnInit: function ( settings ){
            var api = new $.fn.dataTable.Api( settings );
            var table = api.table();
            var id = table.node().id
            var $input = $(`<div id="`+id+`_filter" class="dataTables_filter"><div class="input-group"><input type="search" class="form-control input-sm" placeholder="Search all columns" aria-controls="`+id+`">
  <span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span></div></div>`)

            $input.on('keyup change','input',function(){
                if(table.search() !== this.value)
                    table.search(this.value).draw()
            })
            return $input;
        },
        cFeature: 'F'
    } );    

Still, if there's a better way, do let me know. Thanks!

allan

Hi,

Nicely done. I think the only other way of doing it currently would be to modify the DOM with a little bit of jQuery after the table has been created, which would also be valid. A plug-in could be used to see the init event and perform that action automatically.

Allan