Показать загрузку gif, когда DataTable был очищен

Question

У меня есть несколько вариантов для моего JQuery datatable, который очистит DataTable и загрузит новые данные через WebSockets. Поэтому я очищаю содержимое таблицы с помощью fnClearTable(), и через несколько мгновений я получаю новые данные через свой WebSocket.

Это может продолжаться до нескольких секунд, и пока я хочу отображать загрузочное изображение в своем DataTable. Как я могу это достичь?

Мой обработчик события, который очищает DataTable:

/* 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

Один из способов ее достижения, если у вас есть 2 дивы (я предполагаю, что ваши дивы правильно стиле с содержанием внутри них):

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

Тогда в обработчике:

$('#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)); 
    }); 

При обработке загруженных данных вы должны cc. Отмените изменения

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

Answer 2

Убедитесь, что у вас есть processing: true

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

Затем добавить:

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

Если вы хотите добавить GIF изображение, которое вы можете изменить разметку следующим образом:

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

ДЕМО: http://jsfiddle.net/0m6uo54t/2

обработка:

Включение или отключение отображения индикатора «обработки», когда таблица обрабатывается (например, сорт). Это особенно полезно для таблиц с большими объемами данных, где для сортировки записей может потребоваться значительное .

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

[UPDATE] bProcessing является вариантами наследия, новый код DT использует processing