1

대용량의 데이터를 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); 
       }); 
     } 

+0

이렇게하면 많은 양의 데이터가 필요합니다. 얼마나 많은 * 데이터가 최종 사용자에게 얼마나 유용합니까? 렌더링하는 데 시간이 덜 걸리는 페이징 된 데이터를 전달할 수 없습니까? 2 초는 나이 ... 모바일에서는 어떻게 될 것입니까? – spender

+0

응용 프로그램은 IE9/인트라넷에서만 실행되며 모든 데이터를 한 번에 쿼리해야합니다. –

+0

이러한 쿼리를 수행하기 위해 * all * 데이터를 렌더링해야합니까? – spender

답변

1

이 내 데이터 테이블 구성입니다 :

var dataTable = $('#users').dataTable(
      { 
      "sAjaxSource": "users/complete_list", /* Contains one thousand of users which are charged in few seconds */ 
      "deferRender": true, 
      "bProcessing": true, 
      "bServerSide": true, 
     } 

    ); 

이 그것을 시도하고 당신을 위해 작품을 잘 경우 말해 . ^^

+0

로드 시간과 관련하여 변경 사항이 생성되지 않았습니다. –

+0

정말 미안해. 하나의 해결책을 찾길 바래. – MartaGom

+0

시간 내 주셔서 감사합니다 –