filters in TFOOT elements

[trudrung]

It would be nice to have the filters for each column in the footer for each column in the table. I didn't see a way to do this. I added a 'bFooter' option in oDataTableSettings.oInit.oColumnFilterWidgets and hacked/modified ColumnFilterWidgets to accomplish this. I'm sure my hack isn't the best way to do this. Here's my modification to ColumnFilterWidgets():

var ColumnFilterWidgets = function( oDataTableSettings ) {
    var me = this;
    var sExcludeList = '';
    me.$WidgetContainer = $( '<div class="column-filter-widgets"></div>' );
    me.$MenuContainer = me.$WidgetContainer;
    me.$TermContainer = null;
    me.aoWidgets = [];
    me.sSeparator = '';
    if ( 'oColumnFilterWidgets' in oDataTableSettings.oInit ) {
        if ( 'aiExclude' in oDataTableSettings.oInit.oColumnFilterWidgets ) {
            sExcludeList = '|' + oDataTableSettings.oInit.oColumnFilterWidgets.aiExclude.join( '|' ) + '|';
        }
        if ( 'bGroupTerms' in oDataTableSettings.oInit.oColumnFilterWidgets && oDataTableSettings.oInit.oColumnFilterWidgets.bGroupTerms ) {
            me.$MenuContainer = $( '<div class="column-filter-widget-menus"></div>' );
            me.$TermContainer = $( '<div class="column-filter-widget-selected-terms"></div>' ).hide();
        }
    }

    // Add a widget for each visible and filtered column
    $.each( oDataTableSettings.aoColumns, function ( i, oColumn ) {
        var $columnTh = $( oColumn.nTh );
        var $WidgetElem = $( '<div class="column-filter-widget"></div>' );
        if ( sExcludeList.indexOf( '|' + i + '|' ) < 0 ) {
            me.aoWidgets.push( new ColumnFilterWidget( $WidgetElem, oDataTableSettings, i, me ) );
        }
        // START CHANGES
        if ('bFooter' in oDataTableSettings.oInit.oColumnFilterWidgets && oDataTableSettings.oInit.oColumnFilterWidgets) {
            $(oDataTableSettings.nTFoot.getElementsByTagName('tr')[0].getElementsByTagName('th')[i]).append('<div class="column-filter-widgets"></div>');
            $(oDataTableSettings.nTFoot.getElementsByTagName('tr')[0].getElementsByTagName('th')[i].getElementsByTagName('div')[0]).append($WidgetElem);

        } else
        // END CHANGES
            me.$MenuContainer.append( $WidgetElem );
    } );
    if ( me.$TermContainer ) {
        me.$WidgetContainer.append( me.$MenuContainer );
        me.$WidgetContainer.append( me.$TermContainer );
    }
    oDataTableSettings.aoDrawCallback.push( {
        name: 'ColumnFilterWidgets',
        fn: function() {
            $.each( me.aoWidgets, function( i, oWidget ) {
                oWidget.fnDraw();
            } );
        }
    } );

    return me;
};

[mbdesign]

why you don´t use sDOM to show the Filterwidgets in footer area?

[trudrung]

I did put the Filterwidgets in the footer area using the sDOM property, but I would like to have the filters in the same column as the data just like this example:

http://datatables.net/release-datatables/examples/api/multi_filter_select.html

I think it makes the user interface more intuitive.

On Sat, Jul 28, 2012 at 12:05 PM, mbdesign < reply@reply.github.com

wrote:

why you don´t use sDOM to show the Filterwidgets in footer area?

---

Reply to this email directly or view it on GitHub:

https://github.com/cyberhobo/ColumnFilterWidgets/issues/14#issuecomment-7335497

[robtro]

agreed.

[abolinhas]

+1 Anyone have a solution for this? Best regards

[abolinhas]

@trudrung I manage to fix this, now I have the filters inside each column footer. This is my code.

    var ColumnFilterWidgets = function( oDataTableSettings ) {
        var me = this;
        var sExcludeList = '';
        me.$WidgetContainer = $( '<div class="column-filter-widgets"></div>' );
        me.$MenuContainer = me.$WidgetContainer;
        me.$TermContainer = null;
        me.aoWidgets = [];
        me.sSeparator = '';
        console.log(oDataTableSettings.oInit)
        if ( 'oColumnFilterWidgets' in oDataTableSettings.oInit ) {
            if ( 'aiExclude' in oDataTableSettings.oInit.oColumnFilterWidgets ) {
                sExcludeList = '|' + oDataTableSettings.oInit.oColumnFilterWidgets.aiExclude.join( '|' ) + '|';
            }
            if ( 'bGroupTerms' in oDataTableSettings.oInit.oColumnFilterWidgets && oDataTableSettings.oInit.oColumnFilterWidgets.bGroupTerms ) {
                me.$MenuContainer = $( '<div class="column-filter-widget-menus"></div>' );
                me.$TermContainer = $( '<div class="column-filter-widget-selected-terms"></div>' ).hide();
            }
        }

        // Add a widget for each visible and filtered column
        $.each( oDataTableSettings.aoColumns, function ( i, oColumn ) {
            var $WidgetElem = $( '<div class="column-filter-widget"></div>' );
            if ( sExcludeList.indexOf( '|' + i + '|' ) < 0 ) {
                me.aoWidgets.push( new ColumnFilterWidget( $WidgetElem, oDataTableSettings, i, me ) );
                //me.$MenuContainer.append( $WidgetElem );
            }
            if ('bFooter' in oDataTableSettings.oInit.oColumnFilterWidgets && oDataTableSettings.oInit.oColumnFilterWidgets.bFooter) {
            me.$MenuContainer = $(oDataTableSettings.nTFoot.getElementsByTagName('tr')[0].getElementsByTagName('th')[i]).append('<div class="column-filter-widgets"></div>');
            me.$MenuContainer = $(oDataTableSettings.nTFoot.getElementsByTagName('tr')[0].getElementsByTagName('th')[i].getElementsByTagName('div')[0]).append($WidgetElem);

            }
            me.$MenuContainer.append( $WidgetElem );
        } );
        if ( me.$TermContainer ) {
            me.$WidgetContainer.append( me.$MenuContainer );
            me.$WidgetContainer.append( me.$TermContainer );
        }
        oDataTableSettings.aoDrawCallback.push( {
            name: 'ColumnFilterWidgets',
            fn: function() {
                $.each( me.aoWidgets, function( i, oWidget ) {
                    oWidget.fnDraw();
                } );
            }
        } );

        return me;
    };

And inside datatable init:

var table = $('#exampli').DataTable( {
 dom: 'BfrtipW',
 "oColumnFilterWidgets": {
 "aiExclude": [ 1 ],
    "bFooter":true
 },
})