重新加載刷新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!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM