DataTables에서 AJAX 데이터를로드하는 동안로드 시간을 알려줍니다.

Question

빈 테이블로 시작하는 일부 테이블이 있고 DataTables가 데이터에 대해 WebServer를 요청합니다.

로드하는 데 몇 분이 걸릴 수도 있습니다. DataTables는 기본 Loading 메시지를 표시합니다. 하지만 간단한로드 텍스트 또는 이상한 애니메이션 대신로드가 실행되는 시간을 알려주는 카운터를 추가하고 싶습니다.

해당 설명서에서 수행 할 수있는 방법을 찾을 수 없습니다. 가능한가?

업데이트 : MonkeyZeus의 답변이 완벽하게 작동했습니다. 여기 내 마지막 코드입니다 : 또한

// ... 
,dataTablesLoading: function(e, settings, processing){ 
    setTimeout(function(){ 
     var targetJs = e.target; 
     var target = $(targetJs); 
     var timerContainer = target.find('.dataTables_empty'); 
//tlog(targetJs,'targetJs'); 
//tlog(target,'target'); 
//tlog(timerContainer,'timerContainer'); 

     if(processing){ 
       var timer = 0; 
       var timerHandler = setInterval(function(){ 
        timer++; 
        var hours = Math.floor(timer/3600); 
        var minutes = Math.floor((timer-(hours*60))/60); 
        var secs = timer-(hours*3600)-(minutes*60); 

        var timerText = hours+':'+minutes.lpad("0",2)+':'+secs.lpad("0",2); 
tlog(timerText,'timerText'); 
//tlog(timerContainer,'timerContainer'); 
        timerContainer.text("Loading... "+timerText); 
       },1000); 


      targetJs.setAttribute("data-loading-timer",timerHandler); 
tlog(timerHandler,'timerHandler processing'); 
     }else{ 
      var timerHandler = parseInt(targetJs.getAttribute("data-loading-timer")); 
tlog(timerHandler,'timerHandler not processing'); 

      if(timerHandler>0) 
       clearInterval(timerHandler); 
     } 

    },1000); 
} 
// ... 
$('#...') 
    .on('processing.dt', Framework.utils.dataTablesLoading) 
    .DataTable({...}) 

Answer 1

First, you will need to enable processing when invoking the datatable:

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

Next, you will need to declare what happens instead of the default Loading message using the dt namespace's processing event listener:

// This event will fire twice so pay attention to the processing parameter 
$('#example').on('processing.dt', function (e, settings, processing) { 
    if(processing === true) { 
     alert('Hey, we are processing!'); 
     // some custom code which targets #processingIndicator and applies some timer plug-in or whatever; you figure it out. 
    } 
    else { 
     alert('Hey, we are done processing!'); 
     // some custom code which targets #processingIndicator and hides it; you figure it out. 
    } 
}) 
.dataTable(); 

---

확실히 경우 https://ux.stackexchange.com/a/80858/45170을 확인하므로, 긴 로딩 시간도 고려해야 할 UX 측면을 당신은 더 좋은 경험을하고 싶습니다.