데이터 로딩

Question

레코드를 표시하기 위해 jquery 데이터 테이블을 사용하고 있습니다. 데이터베이스에서 약 12000 개의 레코드를 가져 와서 html 테이블에 추가 한 다음 jQuery 데이터 테이블로 변환합니다.

데이터 테이블로 변환하는 데 오랜 시간이 걸립니다. 나는 약 15 분을 기다렸다. 그러나 아직도 테이블은로드되지 않는다.

어떻게 해결할 수 있습니까?

Answer 1

pagination을 사용하고 동시에 한 번에 기록을 표시하지 않으려면 http://datatables.net/plug-ins/pagination을 참조하십시오. 한 번에 12000 개의 레코드를 표시하는 경우이 방법을 사용하면 좋은 사용자 환경을 제공 할 수 없습니다. 아약스와 페이지 매김을 사용하여 각 페이지에 대한 데이터를로드하십시오.

Answer 2

이 시도 ..

<script type="text/javascript" src="jquery.dataTables.js"></script> 
    <script type="text/javascript" src="dataTables.scrollingPagination.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#example').dataTable({ 
       "sPaginationType": "scrolling", 
       "bProcessing": true 

      }); 
     }); 
    </script> 

Answer 3

을 지연하는 주된 이유는 12000 개 기록에 해당 페이지에 표시하려는 HTML 요소의 엄청난 양이며, 유일한 해결책은 같은 것을 줄이는 것입니다 가능한 한 최대.

는, HTML에서 레코드를 배치 JSON을 통해 페이지에 보내지 마십시오

1. - 당신의 데이터 테이블 페이지 당 당신이 <script> 또는 아약스를 통해 또는 다른로드 할 수 있습니다 ...

2. 제한을 기록 . 첫 번째 페이지 활성화 bPaginate: true 페이지 당 두 번째 세트 레코드 iDisplayLength: 25

3. yourDataTable.fnAddData(data)을 사용하여 데이터 세트를로드하십시오.

Answer 4

이것은 오래되었지만 유용합니다 ... 다음은 긴로드 데이터 용로드 GIF를 표시하는 데 사용됩니다. 페이지 매김과 함께 사용하십시오.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<style> 
#dvLoading 
{ 
    background:#000 url(http://mfgweb.binney.com/manuf/all_data  
/img/loader2.gif) no-repeat center center; 
    height: 100px; 
width: 100px; 
position: fixed; 
z-index: 1000; 
left: 50%; 
top: 50%; 
margin: -25px 0 0 -25px; 
} 

</style> 

<script> 
$(window).load(function(){ 
$('#dvLoading').fadeOut(500); 
}); 
</script> 
<div id="dvLoading"></div> 

Answer 5

두 iterations- 하나를 반복하고 HTML의 내용을로드하고, 다른 하나는 그것을에서 데이터 테이블을 만들기 위해 할 수있을 것 같은로드 시간을 복용. 대신 직접 같이 파라미터를 이용하여 서버로부터 데이터 테이블을로드 :

VAR의 aPublicationElements = 'jsonParameter1', 'jsonParameter2'

여기

 "sAjaxSource": '#yourServerCallHereWhichReturnsJSON#', 
     "fnServerData": fnServerObjectToArray(aPublicationElements), 

"aPublicationElements는"이런 JSON 요소를 포함하는 가변 , 'jsonParameter3', 'jsonParameter4']; 이 같은

그리고 매개 변수 내 그 데이터를 렌더링 :이 도움이

fnServerObjectToArray = function (aElements){ 
    return function (sSource, aoData, fnCallback) { 
     $.ajax({ 
      "dataType": 'json', 
      "type": "POST", 
      "url": sSource, 
      "data": aoData, 
      "success": function (json) { 
       var a = []; 
       for (var i=0, iLen=json.length ; i<iLen ; i++) { 
        var inner = []; 
        for (var j=0, jLen=aElements.length ; j<jLen ; j++) { 
         inner.push(json[i][aElements[j]]); 
        } 
        a.push(inner); 
       } 
       json.aaData = a; 
       fnCallback(json); 
      } 
     }); 
    } 
}; 

희망 :

 "aoColumns": [ 
         {"sTitle":"Title1", 
          "render": function(data, type, oObj) { 
           return oObj[0]; 
          } 
         }, 
         {"sTitle":"Title2", 
          "render": function(data, type, oObj) { 
           return oObj[1]; 
          } 
         }, 
         {"sTitle":"Title3", 
          "render": function(data, type, oObj) { 
           return oObj[2]; 
          } 
         }, 
         {"sTitle":"Title4", 
          "render": function(data, type, oObj){ 
           return oObj[3]; 
          } 
         } 
         } 
        ], 

기능 "fnServerObjectToArray는"배열에 서버 개체를 변환하기 위해이 같은 것입니다.

Answer 6

신뢰 인덱싱은 쿼리에서 사용하는 키 열에서 사용할 수 있습니다. 또한 HTML에 결과를 추가하고 수 DataTable 변환에도 불구하고, I 행 같은 다수 [서버 측 처리] 들어 ... 다음

$('#table_id').DataTable({ ajax: { url: url_to_data, dataSrc : '',
contentType: "application/json", type: "POST", data : function(d) { return JSON.stringify({param1:param1_val,param2:param2_val}); }, }, "pageLength":30, "processing": true, "serverSide": true, //server side processing for larger datasets columns: [ { sTitle : 'col_1', data: 'col_1_field'}, { sTitle: 'col_2', data : 'col_2_field'}, ] });

Answer 7

이 데이터 테이블 서버 측 사용해 Follow this link