jQuery Datatables and ColumnFilterWidget integration issue

Question

I am trying to Place the ColumnFilterWidget plugin in the Header of the Datatables Table.

Here are the changes i made in it :

        /**
        * Menu-based filter widgets based on distinct column values for a table.
        *
        * @class ColumnFilterWidgets
        * @constructor
        * @param {object} oDataTableSettings Settings for the target table.
        */
        var ColumnFilterWidgets = function( oDataTableSettings ) {
                var me = this;
                var sExcludeList = '';
//              me.$WidgetContainer = $( '<div class="column-filter-widgets"></div>' );
                me.$WidgetContainer = $( '<tr class="head"></tr>' );
                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 = $( '<th><div class="column-filter-widget"></div></th>' );
                        if ( oColumn.bVisible && sExcludeList.indexOf( '|' + i + '|' ) < 0 ) {
                                me.aoWidgets.push( new ColumnFilterWidget( $WidgetElem, oDataTableSettings, i, me ) );
                        }
                        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;
        };

I added a extra <tr class='head'> inside the Datatable, and later on i am trying to append the Filters to that with attached to them,But instead of that it is creating new TR tag and then appending the filters in it.

I even changed my dom of data tables to : dom: '<"clear">Cf<"clear">ltWrip', So the table elements should be there so that it can insert filters inside the head.

If you've resolved the issue please post the answer as the solution — Liath
– Liath, Commented May 30, 2014 at 13:59
Actually i added it in the Question itself, as the comment have limitation of characters.Look for this in the question FOUND THE ANSWER Here is it if anyone else needs it . Add a <TR id='Filter.$i'> element in the html Use a for loop and append the counter value to the ID. then modified the column.filterwidget plugn js — user3520135
– user3520135, Commented May 31, 2014 at 11:02
yes I saw that. As you've answered the question you should post it as an answer and mark it as resolved. — Liath
– Liath, Commented May 31, 2014 at 11:04

user3520135 · Accepted Answer · 2014-05-31 11:07:46Z

FOUND THE ANSWER

Here is it if anyone else needs it .

Add a <TR id='Filter.$i'> element in the html Use a for loop and append the counter value to the ID. then modified the column.filterwidget plugn js

 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.$MenuContainer = $( '<div class="column-filter-widget-menus"></div>' );
                                me.$TermContainer = $( '<div class="column-filter-widget-selected-terms"></div>' ).hide();
                        }
                }

                var cnt= 0;
                // Add a widget for each visible and filtered column
                $.each( oDataTableSettings.aoColumns, function ( i, oColumn ) {
                        var $columnTh = $( oColumn.nTh );
                        cnt ++;
                        var $WidgetElem = $( '<div class="column-filter-widget" id=col'+cnt+'></div>' );
                        if ( oColumn.bVisible && sExcludeList.indexOf( '|' + i + '|' ) < 0 ) {
                                me.aoWidgets.push( new ColumnFilterWidget( $WidgetElem, oDataTableSettings, i, me ) );
                        }
                        var Tcol = document.getElementById('A');
                                console.log('---------'+i);

                        //me.$MenuContainer.append( $WidgetElem );
                        $('#Filter'+i).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;
        };

Hope this helps.

Collectives™ on Stack Overflow

jQuery Datatables and ColumnFilterWidget integration issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related