DataTables로드 및 렌더링 지연

부트 스트랩 4 및 클라이언트 측 프로세싱에 DataTables을 사용하고 있습니다. 약 2,000 개의 레코드를 표시합니다.DataTables로드 및 렌더링 지연

로딩 시간은 허용되지만, 페이지 (F5)를 다시로드 할 때 포맷되지 않은 DataTable이 초 단위로 표시됩니다. DataTables가 마지막으로로드되는 것처럼 거의 같습니다.

'0 구성'을 보면 example을 알 수 있습니다. 무슨 뜻인지 알 수 있습니다. 페이지를 다시로드 할 때 실제로 두 번째 분할에 대한 모든 테이블 레코드를 볼 수 있습니다 (빨리해야합니다!).

'Bootstrap 4'example이 있으며 해당 페이지에서도 눈에 띄게 표시됩니다.

몇 가지 질문이 있습니다.

왜 이런 일이 발생합니까?
내가 그것을 막기 위해 할 수있는 일이 있습니까?

나는 JS와 CSS 파일을 재 순서화하려고 시도했지만 (나는 단지 몇 가지가 있습니다) 그러나 아무런 차이가 없습니다. 내 관심사는 내가 더 많은 레코드를 추가하면 로딩 시간이 늘어날 것이고 포맷되지 않은 DataTable은 각 페이지로드에서 더 분명해진다는 것이다.

출처

2017-11-13 TheOrdinaryGeek

Datatables은 DOM에서로드 할 마지막 항목입니다. 이것은 데이터 소스가 렌더링중인 HTML 테이블에있는 경우에 특히 유용합니다. 숨겨진 클래스를 만든 다음 페이지가로드 될 때 테이블에서 해당 클래스를 설정해야합니다. 그런 다음 자바 스크립트에서 마지막으로 클래스를 삭제합니다. 지난 몇 년 동안 DT를 사용하기 위해 "내장 된"기능이 없습니다. 수동으로 제어해야합니다. – ppumkin

DOM에로드 된 수천 개의 요소를 조작, 변경 또는 재구성하는 다른 프레임 워크 플러그인과 완전히 동일한 동작을 볼 수 있습니다. 예외는 없습니다. DataTables의 경우 해결 방법은 빈 돔 '

'을 초기화하고 내장 된 아약스를 사용하여 내용을로드하는 것입니다. 그런 다음 DataTable 인스턴스가 즉시 표시되고 지연이 행 렌더링에 "전달"됩니다. 즉 깜박임은 없지만 "데이터로드 중"(또는 아약스로드 휠 또는 무엇이든)을 볼 수있는 작은 시간입니다 – davidkonrad

매우 큰 JSON이 있으면 http://myjson.com/에로드 할 수 있습니다. 제작할 수 있습니다. 부트 스트랩을 사용하는 예제 4 – davidkonrad

답변

힌트는 연결된 부트 스트랩 4 예제 코드에 있습니다.

$(document).ready(function() { 
    $('#example').DataTable(); 
});

이 코드는 문서가 (이 HTML 및 CSS 렌더링 완료) 준비가되었을 때, 아이디 example와 요소를 가지고 DataTable을으로 바꿀 것을 주장한다.

이 문제를 방지하려면 표의 스타일을 display: hidden으로 설정할 수 있습니다. 2000 행 (또는 그 이상) 렌더링을위한

그럼 당신은 그것을 허용하지 않을 수 있습니다 내 의견 로딩 시간에 DataTable을

$(document).ready(function() { 
    $('#example').DataTable(); 
    $('#example').show(); 
});

출처

2017-11-13 17:39:53 Daniel

숨겨진 테이블을 초기화 할 때 부작용이 있습니다. 테이블이 보이면 예를 들어 ['columns.adjust()'] (https://datatables.net/reference/api/columns.adjust()) 및 다른 API 메소드를 호출해야합니다. –

좋은 점 @ Gyrocode.com - 그러면 'opacity'를 0으로 설정하면 더 나은 해결책이 될까요? – Daniel

감사합니다 @ 대니얼이 실제로 페이지로드 문제를 해결합니다. 그러나 테이블 스타일이 깨져서 제대로 보이지 않습니다. 아마도 위의 Gyrocode가 API 메소드와 관련하여 언급 한 것과 테이블이 표시 될 때 호출되어야 할 필요가있을 것입니다. – TheOrdinaryGeek

로 만든 후 다시 테이블을 표시하는 코드에 $('#example').show()를 추가 할 수 있습니다. PC 및 랩톱에서 로딩 시간이 허용되는 경우에도 모바일에서 처리하는 데 문제가 있습니다. 이미 테스트 해 봤어?

Datatable은 완벽한 플러그인이며 너무 많은 옵션이 있습니다. 첫 번째보기에서 단 10 개의 행만 렌더링 할 수 있으며 사용자가 다른 페이지를보고 싶을 때 Datatable에서 요청하여 드로잉 및 렌더링을 요청할 수 있습니다. 그래서 당신은 다음과 같은 데이터 속성을 사용해야합니다

HTML :

<table id="example" class="table table-striped table-bordered" cellspacing="0"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tbody> 

     </tbody> 
    </table>

JS :

var dataSet = new Array(); 
for(i=0;i<2000;i++){ 
    var item = new Array(
     "name "+i, 
     "position "+i, 
     "office "+i, 
     "age "+i, 
     "start date "+i, 
     "salary "+i 
    ); 
    dataSet.push(item); 
} 

tableMain = $("#example").DataTable({ 
    data: dataSet, 
    columns: [ 
     {"orderable": true}, 
     {"orderable": true}, 
     {"orderable": true}, 
     {"orderable": true}, 
     {"orderable": true}, 
     {"orderable": true} 
    ], 
    pageLength: 10 
});

를이 방법을 통해 HTML 코드의 10 행을 렌더링시피.

출처

2017-11-14 12:17:10

DataTables로드 및 렌더링 지연

답변

관련 문제