代码改变世界

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

2013-01-11 15:14  Fred-Xu  阅读(24902)  评论(1编辑  收藏  举报

功能需求是这样的:从下拉菜单中选择一个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!