仅在DataTables中基于第一列的下拉值过滤表数据

下面提到了数据表网站上提到的所有列的选择选项的function。 如何使其仅在第一列的下拉值上过滤表数据，并将选择下拉列表放在其他位置，而不是通常的标题部分。 例如，请参阅链接

initComplete: function () { var api = this.api(); api.column().indexes().flatten().each( function (i) { var column = api.column(i); var select = $('').appendTo('$selectTriggerFilter').on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex($(this).val()); column.search( val ? '^'+val+'$' : '', true, false ).draw(); } ); column.data().unique().sort().each( function ( d, j ) { select.append( ''+d+'' ) } ); } ); } 

我使用以下代码。 一旦我删除了dom选项，就会出现选择选项，但不会没有dom。

 $(document).ready(function() { $('#tableTrigger').DataTable({ "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ], searching: false, "scrollY": "200px", "dom": 'frtipS', "deferRender": true, initComplete: function () { var api = this.api(); api.columns().indexes().flatten().each( function ( i ) { if(i == 0){ //Create just one SelectBox var select = $('') .appendTo( '#selectTriggerFilter') .on( 'change', function () { var val = $(this).val(); column( i ).search( val ? '^'+$(this).val()+'$' : val, true, false ).draw(); }); column( i ).data().unique().sort().each( function ( d, j ) { select.append( ''+d+'' ); } ); } else return; }); } }); }); 

Answer 1

原因

您的代码存在一些问题：

• searching不应该设置为false否则search()函数将无法正常工作
• column变量未定义

解

以下是更正后的代码。

 $(document).ready(function() { $('#tableTrigger').DataTable({ "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ], "scrollY": "200px", "dom": 'rtipS', // searching: false, "deferRender": true, initComplete: function () { var column = this.api().column(0); var select = $('') .appendTo('#selectTriggerFilter') .on('change', function () { var val = $(this).val(); column.search(val ? '^' + $(this).val() + '$' : val, true, false).draw(); }); column.data().unique().sort().each(function (d, j) { select.append('' + d + ''); }); } }); }); 

笔记

• 我在"dom": 'frtipS'省略了f ，因为我认为你最初想通过将searching设置为false来排除它。 如果要将搜索框与下拉filter一起使用，请包括f 。

• 如果你在dom属性中省略l ，则设置lengthMenu是没有意义的。

DEMO

有关更正代码的演示，请参阅此jsFiddle 。

Answer 2

您可以将搜索部分放在dom中的任何位置。 然后你的事件调用（点击，选择，键盘）。 如下所示呼叫serach api。

 var dTable= $("example").DataTable(); dTable.columns(i).search(v).draw(); 

这里我是你的数据表列索引，v是搜索值。