jQuery数据表和ColumnFilterWidget集成问题
jQuery Datatables and ColumnFilterWidget integration issue
我正试图将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中添加一个<TR id='Filter.$i'>
元素使用for循环并将计数器值附加到ID后面。然后修改列。过滤器插件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;
};
相关文章:
- 如何检测用于WebGL的专用或集成显卡
- 在我的SPA应用程序中集成Facebook共享的问题
- vaadin:使用自定义布局集成angular js
- React ajax数据集成
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- IE中关于ZK和JavaScript集成的一些错误
- 如何将拼写检查集成到密文编辑器
- 将外部文件与AngularJs集成
- 如何将tesseract OCR与Cordova/Phonegap应用程序集成
- Cordova Facebook登录集成cordovaOauth
- 如何在Angular js中集成其他页面中的样式
- 性能与模块化:将JS集成到PHP或单独的custom.JS中
- Meteor集成测试,在velocity'她的镜子上有茉莉花
- Okta与JavaScript的集成
- 将prettyPhoto集成到Wordpress主题中
- 将epub.js集成到firefox中,作为.epub的默认读取器
- 在Meteor:p5.AudioIn()中集成p5.sound.js不是构造函数
- 如何将现有的angular js应用程序集成到Laravel 5中
- 如何将FBjavascript API与我的后台集成
- 将Laravel5.0中的谷歌图表与mysql数据库中的数据集成