加载时隐藏数据表

I am using jquery DataTable v 1.10.11 .. i want to hide the whole table and the div in which it is displayed while the datatable is loading data from the server via ajax call.. I searched but found suggestions to initialize the table in the success of the ajax call which i cannot do as i am performing many tasks on the same table like add/edit/delete. below is my dataTable declaration .

$(document).ready(function (){
//some code ....

var listTable = $('#listTable').DataTable({
                'fnCreatedRow': function (nRow, aData, iDataIndex) {
                $(nRow).attr('id', 'my' + iDataIndex);
                $(nRow).attr('name', 'my' + iDataIndex); // or whatever you choose to set as the id
                },
                "tableTools": {
                        "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
                        "aButtons": [
                            {
                                "sExtends": "copy",
                                "sButtonText": "Copy To ClipBoard",
                            },
                            {
                                "sExtends": "xls",
                                "sFileName": "*.xls",
                                "sButtonText": "Download XLS",
                            },
                            {
                                "sExtends": "print",
                            }                          
                     ]
                  },
                  "bInfo": false,
                  "sEmptyTable": "There are no records",
                  "processing": true,
                  "oLanguage": {
                        "sProcessing": "<img src='${request.contextPath}/images/ajax-loader.gif'>"
                },
                "dom": '<"toolbar">T<"clear">lfrtip',
                "order": [[ 1, "desc" ]]
    });

    $('.dataTables_empty').html("");

//some more code 
//some url
listTable.ajax.url(url).load()

    });

Below is the table HTML code

<div id="data_table_travelHistory" style="margin:0 auto; padding-top:10px; width:90%;">
              <table cellpadding="0" cellspacing="0" border="0"  id="listTable" style="width:100%;" class="table table-striped table-bordered">
              <thead class="alignCenter">
                 <tr>
          <th class="headerclass">Start Date</th>
          <th class="headerclass">Approval Status</th>
          <th class="headerclass">Created On</th>
          <th class="headerclass">Action</th>
                </tr>
              </thead>
              <tbody></tbody>
              <tfoot  class="alignCenter headerclass">
                 <tr>
          <th class="headerclass">Start Date</th>
          <th class="headerclass">Approval Status</th>
          <th class="headerclass">Created On</th>
          <th class="headerclass">Action</th>
                 </tr>
              </tfoot>
              </table>
           </div>

Currently i am able to show a gif loading image while the DataTable is loading . But the initialized table always appears in the background which does not look good. Is there a way i can hide the whole DataTable and the div in which it is and only show the loading bar .... Any help would be appreciated ...

You can initialize the table in ready event, then add remove a css class that shows/hide the table at the end of the ajax request.