重新加载刷新Datatable后自动设定宽度 jquery datatable

功能需求是这样的：从下拉菜单中选择一个Item，然后弹出对话框显示所选项所属的一个数据列表。页面引用了jquery.ui以及jquery.datatable来实现这个功能，dialog中的button click事件来触发弹出一个新的对话框并加载datatable，为了避免重复初始化datatable()，代码改造为：

function initFacotoryVerificationDataTable(fCode) {
        var fvTable, url;

        url = "/FactoryVerification/GetAllFactoryVerificationListByPage?factoryitem=" + fCode;

        if (typeof fvTable == 'undefined' && fvTable != null) { //为了避免多次初始化datatable()

            fvTable.fnClearTable(0); //清空数据
            fvTable.fnDraw(); //重新加载数据
　　　　　　　//fvTable.fnAdjustColumnSizing(); //重新判断列宽度，实际执行并没有效果　
        }
        else {
            fvTable = $('#fvTable').dataTable({
                "bJQueryUI": true,
                "sScrollY": "100%",
                //"sScrollX": "100%",
                //"bAutoWidth": true,
                "bDestroy": true,
                "bSort": false,
                //"bInfo": true,
                //"bScrollCollapse": true,
                "bServerSide": true,
                "sPaginationType": "full_numbers",
                "sAjaxSource": url);
        }


        $(window).resize(function () {
            fvTable.fnAdjustColumnSizing();
        });
    }

咋一看，以上的代码并没有什么问题，也符合逻辑，但

fnAdjustColumnSizing()

没有触发执行实现自动判断列宽的功能，还好datatable有fnInitComplete方法，我们可以在数据加载完毕后执行

fnAdjustColumnSizing()

 else {
            fvTable = $('#fvTable').dataTable({
                "fnInitComplete": function() {
                this.fnAdjustColumnSizing(true);
                },
                "bJQueryUI": true,
                "sScrollY": "100%",

好了，达到功能需求！Yes！

转载于:https://www.cnblogs.com/Fred_Xu/archive/2013/01/11/column-width-not-refreshed-after-ajax-load.html