javascript ajax 处理后数据表 fnAdjustColumnSizing 不起作用

Datatables fnAdjustColumnSizing doesn't work after ajax processing

提问by Awea

I'm currently using datatables with ajax data and I want do adjust the column width. So I found this function fnAdjustColumnSizing and I try to use it :

我目前正在使用带有 ajax 数据的数据表，我想调整列宽。所以我找到了这个函数 fnAdjustColumnSizing 并尝试使用它：

oTable = $('.datatable').dataTable( {
    "sScrollX": "100%",
    "sScrollXInner": "200%",
    "bScrollCollapse": true,
    "bDestroy" : true,
    "sAjaxSource": "xhr.php",
    "bFilter": false,
    "bSort": false,
    "bLengthChange": false,
    "bPaginate": false,
    "bInfo": false,
    "fnServerData": function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json', 
            "type": "POST", 
            "url": "webservice.php", 
            "data": 'id=' + quotation_id + '&customer_id=' + id + '&action=true', 
            "success": function(msg){
                fnCallback(msg);
            }
        });
    },
    "fnInitComplete": function() {
        this.fnAdjustColumnSizing();
    }
});

The function haven't any effect but if I use it inside another event such like this :

该函数没有任何效果，但如果我在另一个事件中使用它，例如：

$('#target').click(function() {
    oTable.fnAdjustColumnSizing();
});

It work well, any idea ?

它运作良好，有什么想法吗？

采纳答案by Awea

I find a solution by using a function inside the "success" callback of my ajax query :

我通过在我的 ajax 查询的“成功”回调中使用一个函数找到了一个解决方案：

$.ajax( {
    "dataType": 'json', 
"type": "POST", 
"url": "webservice.php", 
"data": 'edit_quotation=true&action=true' + data, 
"success": function(msg){
    fnCallback(msg);
    $('.overlay').hide();
    adjustTable();
}
});

function adjustTable(){
    oTable.fnAdjustColumnSizing();
}

And it work like a charm but I don't know why. Someone can explain ?

它就像一种魅力，但我不知道为什么。有人可以解释一下吗？

回答by Nicola Peluchetti

Have you tried doing

你有没有试过做

"fnInitComplete": function() {
    oTable.fnAdjustColumnSizing();
}

Because i'm not sure that thispoints to table object

因为我不确定this指向 table 对象

回答by Roger

I had a similar problem in Internet Explorer 8 (not in Firefox): I was getting my headers unaligned with respect to the table body.

我在 Internet Explorer 8（不是在 Firefox 中）中遇到了类似的问题：我的标题与表格主体不一致。

The table is initialized inside a 'modal' dialog (twitter bootstrap), AFTER it is shown. Finally, to make it work with Internet Explorer 8, after creating the table I'm making this call:

该表在显示后在“模态”对话框（twitter bootstrap）内初始化。最后，为了使其与 Internet Explorer 8 配合使用，在创建表后，我进行了以下调用：

var t = setTimeout(function () { myTableObject.fnAdjustColumnSizing(false);}, 300);

This refreshes the table without making another unnecessary Ajax call, but it waits 300 ms before doing it, to 'let internet explorer do its thing' before readjusting. If you set lower values i.e. 10 ms) this doesn't work.

这会刷新表，而不会进行另一个不必要的 Ajax 调用，但它会在执行此操作之前等待 300 毫秒，以便在重新调整之前“让 Internet Explorer 完成它的工作”。如果您设置较低的值，即 10 毫秒），这将不起作用。

I hope it helps,

我希望它有帮助，

Roger

罗杰