jQuery Datatables 和 ColumnFilterWidget 集成问题

【问题标题】：jQuery Datatables and ColumnFilterWidget integration issuejQuery Datatables 和 ColumnFilterWidget 集成问题
【发布时间】：2014-05-29 09:07:14
【问题描述】：

我正在尝试将 ColumnFilterWidget 插件放在数据表的表头中。

这是我在其中所做的更改：

        /**
        * 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;
        };

我在数据表中添加了一个额外的<tr class='head'>，稍后我尝试将过滤器附加到附加到它们的过滤器上，但它不是创建新的 TR 标签，然后在其中添加过滤器。

我什至将我的数据表 dom 更改为：dom：'<"clear">Cf<"clear">ltWrip', 所以表格元素应该在那里，以便它可以在头部插入过滤器。

【问题讨论】：

• 如果您已解决问题，请将答案作为解决方案发布
• 实际上我在问题本身中添加了它，因为评论有字符限制。在问题找到答案中寻找这个如果其他人需要它。在 html 中添加 元素使用 for 循环并将计数器值附加到 ID。然后修改了 column.filterwidget 插件 js
• 是的，我看到了。回答完问题后，您应该将其发布为答案并将其标记为已解决。
• 好吧，抱歉我不知道，这是新手。
• 不用担心 - 这样您就可以获得您所看到的声誉 ;)