DataTables search bar appear on click

Question

I am using dataTables in a small jquery app i am making. I basically have a search bar which i only want to show if i click on the search icon. In order to make the search bar disappear "bFilter": true, should be set to false. This is a fiddle i have created and what i have so far.

The following is what i tried but it does not work.

<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>

In this i basically set the bfilter to false initially to make it not appear and try to set it to true upon clicking the search icon. Can someone please help? Also for some reason my search icon css got messed up idk why. Please advice.

Answer 1

This will hide your filter input box and show it when you click the search icon.

CSS:

#example_filter {
    display: none;
}

JS:

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

DEMO: JSFIDDLE

Alternative, you can use .toggle() so a second click will hide the box again.

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