功能需求是這樣的:從下拉菜單中選擇一個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!