Javascript 在Angular Datatable的jQuery ColumnFIlterWidget插件中隐藏/删除额外的下拉小部件

Javascript 在Angular Datatable的jQuery ColumnFIlterWidget插件中隐藏/删除额外的下拉小部件,javascript,jquery,angularjs,datatables,angular-datatables,Javascript,Jquery,Angularjs,Datatables,Angular Datatables,基本上,我想在这里实现两件事。我在这里使用columnFilterWidget.js jQuery数据表插件进行列过滤。我在“排除”一个额外的下拉列表时遇到了一些问题,该下拉列表是第6个,它包含整个dataTable内容HTML。当前,第6列删除了所有数据,并显示一个空数据表 这是我的HTML: <table datatable="ng" dt-options="dtOptions" dt-instance="dtInstanceCallback" style="width: 10

基本上,我想在这里实现两件事。我在这里使用columnFilterWidget.js jQuery数据表插件进行列过滤。我在“排除”一个额外的下拉列表时遇到了一些问题,该下拉列表是第6个
,它包含整个dataTable内容HTML。当前,第6列删除了所有数据,并显示一个空数据表

这是我的HTML:

<table datatable="ng" dt-options="dtOptions"
    dt-instance="dtInstanceCallback" style="width: 100%" id="quoteMgmt">

    <thead>
        <tr>
            <th>Customer</th>
            <th>Origin City</th>
            <th>Origin State</th>
            <th>Destination City</th>
            <th>Destination State</th>
            <th></th> 

       </tr>
    </thead>
    <tbody>

        <tr ng-repeat="quote in mgmtQuote track by quote.quoteNumber">

            <td style="display: none">
                {{ quote.customerInfoVo.customerName }}</td>
            <td style="display: none">
                {{ quote.eqmCommonInfo.origCity }}</td>
            <td style="display: none">
                {{ quote.eqmCommonInfo.origState }}</td>
            <td style="display: none">
                {{ quote.eqmCommonInfo.destCity }}</td>
            <td style="display: none">
                {{ quote.eqmCommonInfo.destState }}</td>    

            <td>
                <div class="row">
                    <div class="seven columns">
                    [Datatable Content]

顾客
起源城市
起源国
目的地城市
目的国
{{quote.customerInfoVo.customerName}
{{quote.eqmCommonInfo.origCity}
{{quote.eqmCommonInfo.origState}
{{quote.eqcommoninfo.destCity}
{{quote.eqmCommonInfo.destState}
[数据表内容]

这是我的app.js

 $scope.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('sDom', 'ltip')
                .withOption('iDisplayLength', 25)
                .withOption('fnDrawCallback',function(oSettings){$(oSettings.nTHead).hide();SpinnerService.hide();})
                .withOption('aaSorting',[])
                .withLanguage({"sEmptyTable":"No quotes available"})
                .withOption("sDom", 'W<"clear">lfrtip')
                .withOption('aoColumnDefs',[{
                    'bVisible':true,'aTargets':[0,1,2,3,4]
                }])
                .withOption('aoColumnDefs',[{
                    'bVisible':false,'aTargets':[5]
                }]);
$scope.dtOptions=DTOptionsBuilder.newOptions()
.withOption('sDom','ltip')
.withOption('iDisplayLength',25)
.withOption('fnDrawCallback',函数(oSettings){$(oSettings.nTHead.hide();SpinnerService.hide();})
.withOption('aaSorting',[])
.withLanguage({“sEmptyTable”:“无可用引号”})
.withOption(“sDom”和“Wlfrtip”)
.withOption('aoColumnDefs'[{
“bVisible”:true,“aTargets”:[0,1,2,3,4]
}])
.withOption('aoColumnDefs'[{
'bVisible':false,'aTargets':[5]
}]);

我可以通过使用不同的语法来修复它。在使用Angular Datatable DTOptionsBuilder时,应谨慎使用语法。张贴我的答案,以防对某人有所帮助

   $scope.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('iDisplayLength', 25)
                .withOption('fnDrawCallback',function(oSettings){$(oSettings.nTHead).hide();SpinnerService.hide();})
                .withOption('aaSorting',[])
                .withOption('bJQueryUI',false)
                .withOption('bDeferRender',true)
                .withLanguage({"sEmptyTable":"No quotes available"})
                .withOption("sPaginationType",'full_numbers')
                .withOption('sDom', 'W<"clear">lrtip')
                .withOption("aoColumns",[
                   /*0 Customer */         {"bVisible":false},
                   /*1 Origin City */      {"bVisible":false},
                   /*2 Origin State */     {"bVisible":false},
                   /*3 Desination City */  {"bVisible":false},
                   /*4 Desination State */ {"bVisible":false},
                   /*5 Equipment Type */   {"bVisible":false},
                   /*6 Entire Datatable */ {"bVisible":true},
                   /*7 Sent Date */        {"bVisible":false},
                   /*8 Expiration Date */  {"bVisible":false},
                   /*9 Awarded Date */     {"bVisible":false},
                   /*10 Awarded Date desc*/{"bVisible":false}
                 ])
                 .withOption("oColumnFilterWidgets",{
                      "aiExclude":[6,7,8,9,10],
                      "sSeparator": "\\s*/+\\s*",
                      "bGroupTerms": false,
                 })
$scope.dtOptions=DTOptionsBuilder.newOptions()
.withOption('iDisplayLength',25)
.withOption('fnDrawCallback',函数(oSettings){$(oSettings.nTHead.hide();SpinnerService.hide();})
.withOption('aaSorting',[])
.withOption('bJQueryUI',false)
.withOption('bDeferRender',true)
.withLanguage({“sEmptyTable”:“无可用引号”})
.withOption(“sPaginationType”,“完整编号”)
.withOption('sDom','Wlrtip')
.withOption(“aoColumns”[
/*0客户*/{“bVisible”:false},
/*1起源城市*/{“bVisible”:false},
/*2原始状态*/{“bVisible”:false},
/*3设计城市*/{“bVisible”:false},
/*4设计状态*/{“bVisible”:false},
/*5设备类型*/{“bVisible”:false},
/*6整个数据表*/{“bVisible”:true},
/*7发送日期*/{“bVisible”:false},
/*8到期日期*/{“bVisible”:false},
/*9授予日期*/{“可见”:假},
/*10授予日期说明*/{“可见”:假}
])
.withOption(“oColumnFilterWidgets”{
“aiExclude”:[6,7,8,9,10],
“s分离器”:“\\s*/+\\s*”,
“bGroupTerms”:false,
})