javascript數據表過濾器選項不起作用

Question

我的過濾器列是

<select id="filter">
<option value="Main Banner">Main Banner</option>
<option value="Right Banner">Right Banner</option>
</select>

我的桌子是

 <table id="example1" class="table table-bordered table-striped">
 </table>

我的數據表 scipts

<script type="text/javascript">
$(function() {
var table = $('#example1').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0, 3, 4 ] }
]});
$('#example2').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false
});
});
</script>

我的過濾器腳本是

<script type="text/javascript">
$("#filter").on('change', function() {
//filter by selected value on second column
table.column(1).search($(this).val()).draw();
});    
</script>

在下拉列表中，主橫幅和右橫幅出現，但更改不起作用...

這里的過濾器選項不起作用...

請幫我...

嘗試解決這個問題......

Answer 1

試試這個：

<script type="text/javascript">
  $("#filter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#filter").filter(function() {
      $(this).parent().parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
  
  </script>