Hide Datatable before fetching data from MySQL database

Question

I am making a website where we can fetch data from MySQL and display in table. I am using datatable codes for responsive table with pagination and search option. When we open the page, the table remain empty and when we enter any word and hit enter, the data is fetched in table. I want to hide the table before fetching data as it is confusing visitor to input the searching term. Please help me to resolve this. Please see table circled with red mark I want to remove before search and show data in this table only after hitting search button.

Answer 1

Add below codes at JUST AFTER INITIALIZING TABLE

if ($(".dataTables_empty").length) {
$(".dataTables_wrapper").hide(); }

I did this to solve the problem

<script type="text/javascript"> $(document).ready(function() {
$('#example').DataTable(); if ($(".dataTables_empty").length) { $(".dataTables_wrapper").hide();} } ); </script>

Answer 2

Hi my friend try like this:

<div class="table-responsive" id="yourInputSearchValue" style="display:none">
<table class="display dataTable" id="exampleTable"  >
                                //Your columns here
                               </table>
                                 </div>

Javascript:

$('#yourSubmit').on('click',function() {
console.log($('#yourInputSearchValue').val());
id = $.trim($('#yourInputSearchValue').val().replace(/\s+/g, ' '));
console.log(id);
$('#theDivthatContainsTheTable').hide();
exampleTable =$('#exampleTable').DataTable();
if ($.fn.DataTable.isDataTable("#exampleTable")) {
exampleTable.destroy();
$('#exampleTable tbody').remove();
}//this help when you search again
});

Hope it helps