單擊時出現DataTables搜索欄

Question

我在做的一個小型jquery應用程序中使用dataTables 。 我基本上有一個搜索欄，如果我單擊搜索圖標，我只想顯示它。 為了使搜索欄消失“ bFilter”：true，應設置為false。 這是我創造的小提琴 ，到目前為止我所擁有的。

以下是我嘗試過的方法，但是它不起作用。

<script>
    (document).ready( function () {
      $('#example').dataTable( {
        "bPaginate": false,
        "bFilter": false,
       "oLanguage": { "sSearch": "" } 



      } );

      $('.dataTables_filter input').attr("placeholder", "enter seach terms here");
    } );

    $('#search').click(function(e) {  

      $('#example').dataTable( {

        "bFilter": true




      } );

        });
</script>

在這種情況下，我基本上將bfilter最初設置為false以使其不顯示，並在單擊搜索圖標時嘗試將其設置為true。 有人可以幫忙嗎？ 同樣由於某種原因，我的搜索圖標css搞砸了idk為什么。 請指教。

Answer 1

這將隱藏您的過濾器輸入框，並在您單擊搜索圖標時顯示它。

CSS：

#example_filter {
    display: none;
}

JS：

$('#search').click(function(e) {  
    $('#example_filter').show();
});

演示： JSFIDDLE

或者，您可以使用.toggle（），因此再次單擊將再次隱藏該框。

$('#search').click(function(e) {  
    $('#example_filter').toggle();
});