나는 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으로 모든 행을 반환하지만 그들 중 일부는 특정 시간에 보여 주었다됩니다 , 사용자가 스크롤 할 때 데이터가 업데이트됩니다 (초기로드 후 페이지가 더 빠름).
웹 서비스를 변경해야하기 때문에 첫 번째 솔루션은 클라이언트 측 처리보다 복잡합니다. 나 한테 조언 있니? 어떻게 이러한 솔루션을 구현할 수 있습니까? 감사합니다
당신은 이미 선택 사항을 알고있는 것 같아요. 그래서 제가 말할 수있는 것은 # 1은 성능상의 이점이 있고, # 2는 구현하기가 더 쉽다는 것입니다. –
예,하지만 동적 데이터를 사용하여 구현할 수있는 방법을 모르겠습니다. – luca