Zeige gif, wenn DataTable gelöscht wurde

Question

Ich habe mehrere Optionen für meine JQuery Datentabelle, die die DataTable löschen und neue Daten über WebSockets laden wird. Dazu lösche ich den Tabelleninhalt mit fnClearTable() und wenige Augenblicke später erhalte ich die neuen Daten über meinen WebSocket.

Dies kann bis zu ein paar Sekunden dauern und in der Zwischenzeit möchte ich ein Ladebild in meiner DataTable anzeigen. Wie kann ich das erreichen?

Meine Event-Handler, die die Datatable löschen:

/* On Daterange change (e.g. Last 3 Days instead of Last 24h) */ 

    $('#profitList_dateRange').change(function() { 
     var dateRangeHours = $("#profitList_dateRange").val(); 
     var jsonParamObject = JSON.parse(dateRangeHours); 

     // Clear table 
     var profitList = $('#profitList').dataTable(); 
     profitList.fnClearTable(); // Now I want to show the loading image! 
     socket.emit('load-statistics', (jsonParamObject)); 
    }); 

Answer 1

Eine Möglichkeit, dies zu erreichen ist, wenn man 2 divs hat (Ich gehe davon aus, dass Ihr divs richtig auf den Inhalt in sie gestylt werden):

<div id="profitList"> your table content </div> 
<div id="profitListLoading"> show loading here </div> 

Dann in Ihrem Handler:

$('#profitList_dateRange').change(function() { 
     var dateRangeHours = $("#profitList_dateRange").val(); 
     var jsonParamObject = JSON.parse(dateRangeHours); 

     // Clear table 
     var profitList = $('#profitList').dataTable(); 
     profitList.fnClearTable(); // Now I want to show the loading image! 
     $('#profitList').hide(); 
     $('#profitListLoading').show(); 
     socket.emit('load-statistics', (jsonParamObject)); 
    }); 

In Ihrer Handhabung von geladenen Daten sollten Sie ofc. zufällt die Änderung

 $('#profitList').show(); 
     $('#profitListLoading').hide(); 

Answer 2

Stellen Sie sicher, processing: true

$('#example').dataTable({ 
    processing: true 
}); 

Dann fügen Sie haben:

$('.dataTables_processing', $('#example').closest('.dataTables_wrapper')).show(); 

Wenn Sie ein GIF-Bild hinzufügen möchten, können Sie das Markup wie folgt ändern:

$('#example').dataTable({ 
    oLanguage: { 
    sProcessing: "<img src='https://d13yacurqjgara.cloudfront.net/users/12755/screenshots/1037374/hex-loader2.gif'>" 
    }, 
    processing: true 
}); 

DEMO: http://jsfiddle.net/0m6uo54t/2

Verarbeitung:

Aktivieren oder die Anzeige eines 'Verarbeitung' Indikatoren deaktivieren, wenn die Tabelle verarbeitet wird (z.B. eine Art). Dies ist besonders nützlich für Tabellen mit großen Datenmengen, wo es eine merkliche Zeit zum Sortieren der Einträge dauern kann.

https://datatables.net/reference/option/processing

[UPDATE] bProcessing die Legacy-Option ist, verwendet der neue DT-Code processing