대용량의 데이터를 datatable (jquery)로로드하는 것과 관련하여 문제가 있습니다. Chrome/Firefox에서로드 시간이 허용 되더라도 (약 2 초) 내 애플리케이션은로드가 약 16 초인 IE9에서 실행해야합니다.
"bDeferRender"를 사용하려고했습니다 : true, 성공하지 못했습니다.
이 데이터 테이블은 tfoot에서 선택 필터를 가지며 사용자가 열의 값을 선택할 때마다 다른 모든 필터를 업데이트해야합니다. 또한 모든 행에는 사용자가 행을 선택할 수 있도록 첫 번째 열에 체크 상자가 있습니다.
Jquery Datatables IE9에서 느린 렌더링
DataTable을 초기화 :
var tableApi;
var initFunction = function(){
tableApi = this.api();
setTimeout(function(){
preventFirstDraw = false;
},5000);
tableApi.columns().indexes().flatten().each(function (colIdx) {
if(colIdx>0){
var column = tableApi.column(colIdx);
if(colIdx-1')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $(this).val();
var columnInside = tableApi.column(colIdx);
columnInside
.search(val ? '^'+val+'$' : '', true, false)
.draw();
bindTableClick(id,index);
var nextColIdx = colIdx+1;
$("select[data-colIdx='"+nextColIdx+"']").each(function(){
var select = $(this);
select.empty();
tableApi.rows().data().each(function (d, j) {
if(d[colIdx].toLowerCase() == val.toLowerCase() || $.trim(val)==""){
select.append(''+d[nextColIdx]+'');
}
});
});
});
column.data().unique().sort().each(function (d, j) {
select.append(''+d+'')
});
}else{
$('input', column.footer()).on('keyup change', function() {
oTable
.column(colIdx)
.search(this.value)
.draw();
bindTableClick(id,index);
});
}
}
});
};
var oTable = table.DataTable({
"language": dataTableFR,
"aaSorting": [[0, 'asc']],
"iDisplayLength": 10,
"bDeferRender" : true,
"initComplete": initFunction
});
bindTableClick의 연료 소모량 :
function bindTableClick(id,index){
Metronic.init();
$('#'+id+" tbody tr").unbind('click');
$("#"+id+" tbody tr").click(function(){
if($(this).hasClass("active")){
$(this).removeClass("active");
$(this).find('.checkboxes').each(function(){
$(this).attr('selected', false);
$(this).parent().removeClass('checked');
$(this).trigger('change');
});
var headers = $(this).parents('table').find('th').map(function() {
return $.trim($(this).attr('data-alias'));
}).get();
var values = $(this).find('td').map(function() {
return "";
}).get();
updateComponentTableValue(headers,values);
}else{
$("#"+id+" tbody tr").removeClass("active");
$("#"+id+" tbody tr .checkboxes").each(function(){
$(this).attr('selected', false);
$(this).parent().removeClass('checked');
$(this).trigger('change');
});
$(this).addClass("active");
$(this).find('.checkboxes').each(function(){
$(this).parent().addClass('checked');
$(this).attr('selected', true);
$(this).trigger('change');
});
var headers = $(this).parents('table').find('th').map(function() {
return $.trim($(this).attr('data-alias'));
}).get();
var values = $(this).find('td').map(function() {
return $.trim($(this).text());
}).get();
updateComponentTableValue(headers,values);
triggerComponent(index,"");
}
});
$('#'+id+' .group-checkable').change(function() {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function() {
if (checked) {
$(this).attr("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).attr("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
}
이렇게하면 많은 양의 데이터가 필요합니다. 얼마나 많은 * 데이터가 최종 사용자에게 얼마나 유용합니까? 렌더링하는 데 시간이 덜 걸리는 페이징 된 데이터를 전달할 수 없습니까? 2 초는 나이 ... 모바일에서는 어떻게 될 것입니까? – spender
응용 프로그램은 IE9/인트라넷에서만 실행되며 모든 데이터를 한 번에 쿼리해야합니다. –
이러한 쿼리를 수행하기 위해 * all * 데이터를 렌더링해야합니까? – spender