Ausblenden DataTable beim Laden

Question

Ich benutze jquery DataTable v 1.10.11 .. Ich möchte die ganze Tabelle und das Div, in dem es angezeigt wird, während die Datentabelle geladen wird Daten vom Server über Ajax-Aufruf .. Ich suchte aber habe Vorschläge gefunden, um die Tabelle im Erfolg des Ajax-Aufrufs zu initialisieren, was ich nicht tun kann, da ich viele Aufgaben in der gleichen Tabelle wie add/edit/delete ausführe. Unten ist meine DataTable-Deklaration.

$(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() 

    }); 

Unten ist der Tabelle 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> 

Derzeit bin ich in der Lage eine gif Lade Bild zu zeigen, während die Datatable geladen sind. Aber die initialisierte Tabelle erscheint immer im Hintergrund, was nicht gut aussieht. Gibt es eine Möglichkeit, ich kann die ganze DataTable und das Div, in dem es ist und nur die Lade bar zeigen .... Jede Hilfe würde geschätzt werden ...

Answer 1

Sie können die Tabelle in bereit Ereignis initialisieren, dann hinzufügen Entfernen Sie eine CSS-Klasse, die die Tabelle am Ende der AJAX-Anfrage anzeigt/ausblendet.