Jquery Datatables slow render on IE9

Question

I am having a problem regarding the loading of big volumes of data into a datatable ( jquery). Although the load time in Chrome / Firefox is acceptable (around 2 seconds), my application need to run in IE9 in which the loading is about 16 seconds.
I've tried to use "bDeferRender" : true, without any success.
This datatable has select filters in the tfoot, and it is required to update all others filters whenever the user selects a value in a column. Also all rows have a checkbox in the first column to let the users to select a row.

Datatable init:

        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

This is my datatable configuration:

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

    );

Try it and tell me if works fine for you. ^^