Question

我遇到了将大量数据加载到数据表（jquery）中的问题。虽然Chrome / Firefox中的加载时间是可接受的（大约2秒），但我的应用程序需要在IE9中运行，其中加载时间约为16秒。
我试图使用“bDeferRender”：true ，但没有任何成功此数据表在tfoot中具有选择过滤器，并且只要用户选择列中的值，就需要更新所有其他过滤器。此外，所有行都在第一列中有一个复选框，以便用户选择一行。

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功能：



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

    );

试试看，告诉我你是否适合自己。 ^^

Jquery Datatables在IE9上缓慢渲染

1 个答案: