2016-12-01 5 views
0

나는 ajax 데이터 요청 (json 형식)과 동적 열을로드 할 때 datatables을 사용하고 있습니다. 나는 페이지가 느려지이 번호로 300 행과 300 열을 가질 수 있기 때문에Datatables : 동적 열 및 엄청난 양의 데이터

var tableData; 
var tableName='#iuprTable'; 

$(document).ready(function(){ 

    jQuery.ajax({ 
     type : "GET", 
     url : "table/"+document.getElementById("hiddenIdCar").value, 
     headers: {'Content-Type': 'application/json'}, 
     beforeSend: function() { 
      waitingModal.showPleaseWait(); 
     }, 
     success: function(data,status,xhr){ 
      //No exception occurred 
      if(data.success){ 
       tableData = data.result; 
       $.each(tableData.columns, function (k, colObj) { 
        var str = '<th data-html="true" data-toggle="tooltip" title="<b>NAME</b>:'+ colObj.parName + '<br><b>DESCRIPTION</b>:' + colObj.description + '<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.parName + '</th>'; 
        $(str).appendTo(tableName+'>thead>tr'); 
       }); 
      } else { 
       waitingModal.hidePleaseWait(); 
       notifyMessage(data.result, 'error'); 
      } 
     }, 
     error: function(xhr,status,e){ 
      window.location.href = "/500"; 
     } 
    }).complete(function() { 
     //initialize datatable 
     if (! $.fn.DataTable.isDataTable(tableName)) { 
      var iuprTable = $(tableName).DataTable({ 
       scrollCollapse: true, 
       scrollX:  true, 
       scrollY:  '60vh', 
       paging:   false, 
       "data": tableData.data, 
       "columns": tableData.columns, 
       fixedColumns: { 
        leftColumns: 4 
       }, 
       "initComplete": function(settings){ 
        //TOOLTIP cell 
        $(tableName+ ' tbody td').each(function (k, cellObj){ 
         this.setAttribute('title', cellObj.innerText); 
         this.setAttribute('data-toggle', "tooltip"); 
        }); 
        $('[data-toggle="tooltip"]').tooltip({ 
         container: 'body' 
        }); 
        //add timeout because otherwise user could see a too fast waiting modal 
        setTimeout(function(){ 
         waitingModal.hidePleaseWait(); 
        }, 1000);  
       } 
      }); 
     } 
     else { 
      iuprTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load(); 
     } 
    }); 
}); 

function notifyMessage(textMessage, typeMessage){ 
    $.bootstrapGrowl(textMessage, { 
     type: typeMessage, // (null, 'info', 'error', 'success') 
    }); 
} 

: 이것은 내 실제 코드입니다. 서버 측 프로세싱에 대해 읽었는데 어떻게하면 성능을 향상시킬 수 있는지 궁금합니다. 나는이 개 솔루션을 발견 :

1) 서버 측 처리 : 서버에 요청만을 보여 주었다 행

2) 클라이언트 측 : json으로 모든 행을 반환하지만 그들 중 일부는 특정 시간에 보여 주었다됩니다 , 사용자가 스크롤 할 때 데이터가 업데이트됩니다 (초기로드 후 페이지가 더 빠름).

웹 서비스를 변경해야하기 때문에 첫 번째 솔루션은 클라이언트 측 처리보다 복잡합니다. 나 한테 조언 있니? 어떻게 이러한 솔루션을 구현할 수 있습니까? 감사합니다

+0

당신은 이미 선택 사항을 알고있는 것 같아요. 그래서 제가 말할 수있는 것은 # 1은 성능상의 이점이 있고, # 2는 구현하기가 더 쉽다는 것입니다. –

+0

예,하지만 동적 데이터를 사용하여 구현할 수있는 방법을 모르겠습니다. – luca

답변

0

를 사용하여 서버 측 한계 매김하고

그리고 확실히 성능이 향상됩니다 각각의 추천 열 데이터베이스 인덱스 ..

가능하면 페이지 등 당 50의 오프셋 (offset)는 캐시 쿼리와 함께 갈 수 있습니다 memcached 등

+0

코드 예가 ​​있습니까? – luca

+0

http://dev.mysql.com/doc/refman/5.7/en/mysql-indexes.html – ishwar

+0

이것은 쿼리 용이며, 내 문제는 datatables입니다. – luca

관련 문제