title: JQuery DataTables - Hide Table Until Searching
body: <p>I'm using DataTables with JQuery to show some data on my site. I use the search feature to filter the data, and give me the intended results. What I'd like to do is to hide the table until a user begins typing a search in the box, and only then display the proper results. Here's my DataTables code right now:</p>
  
  <pre><code>    function renderTable() {
          jQuery('.dataTable').show();
          jQuery('.dataTables_info').show();
          jQuery('.dataTables_paginate').show();
      }
  
      function hideTable() {
          jQuery('.dataTable').hide();
          jQuery('.dataTables_info').hide();
          jQuery('.dataTables_paginate').hide();
      }
  
      jQuery('.dataTables_filter input').keypress(function() {
          if (jQuery('.dataTables_filter input').val() != '') {
              renderTable();
          } else {
              hideTable();
          }
      });
  
      jQuery(document).ready(function() {
  
          jQuery('#resultsTable').DataTable({
              "paging": true,
              "pageLength": 25,
              "lengthChange": false,
              "pagingStyle": "simple_numbers",
              "language": {
                  "search": "",
                  "searchPlaceholder": "Search for an entry"
              },
              "order": [1, 'asc']
          });
  
          hideTable();
  
      } );
  </code></pre>
  
  <p>It successfully hides everything from the DataTable but the searchbox on document.ready, but I can't get it to call my renderTables() function when a user clicks in the box and types. I'm not sure if I'm targeting it correctly with: '.dataTables_filter input'. The search input that DataTables renders doesn't have any unique ID I can target, so I have to refer to it from the filter element which contains it.</p>