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 < [email protected]

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
 },
})