DataTables search bar appear on click

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.

Answers


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();
});

Need Your Help

Converting MS word "curly" quotes and apostrophes

ms-word quotes

How do I convert the MS Word quotes and apostrophes to regular quotes and apostrophes characters in Java? What's the unicode number for these characters?

Syntax errors in ls after update from SVN

lotus-notes xpages

We are using SVN for version control of code from notes databases. These databases contains a lot of ls/js/java code. For js/java code it works fine.