jQuery數據表緩慢呈現在IE9上

Question

我有一個關於大容量數據加載到數據表（jquery）的問題。 儘管Chrome/Firefox中的加載時間可以接受（大約2秒），但我的應用程序需要在IE9中運行，其中加載大約爲16秒。
我試過使用「bDeferRender」：true，沒有任何成功。
該數據表在tfoot中有選擇過濾器，每當用戶選擇列中的值時，都需要更新所有其他過濾器。此外，所有行都在第一列中有一個複選框，以讓用戶選擇一行。

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 funtion：

     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); 
       }); 
     } 

Answer 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, 
     } 

    ); 

試試吧，如果工作正常，你告訴我。 ^^