jQuery DataTables + columnFilter插件jQuery UI選項卡的溢出問題

在我的應用程序中，我使用jQuery DataTables 1.9.4動態地向用戶顯示信息。實現這一點很好，效果很好。jQuery DataTables + columnFilter插件jQuery UI選項卡的溢出問題

但是在我的應用我有內jQuery UI Tabs這些表。起初，有一個與數據表無法正確計算列寬，由於它沒有在屏幕上可見（這是固定通過設置的錯誤「‘bAutoWidth’：假」屬性設置爲false並調用oTable.fnAdjustColumnSizing（）;綁定到選項卡選擇/激活操作）。

應用程序現在需要柱過濾，以使數據向下鑽取其中我已經使用jQuery DataTables Column Filter Plug-In對。出於某種原因，錯誤再次出現，我不知道我怎麼能修復它（我假設頁腳列寬度的計算不會與核心表計算同時發生）。

表

調試信息：DataTable Debug（沒有看起來與衆不同）

任何幫助將是巨大的:)

數據表初始化代碼的

 $('#tblQuotes').dataTable({ 
      "bJQueryUI": true, 
      "aLengthMenu": [[10, 25, 50, 75, 100, 250, 500], [10, 25, 50, 75, 100, 250, 500]], 
      "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": '@Url.Content("~/Home/GetQuote")', 
      "sPaginationType": "full_numbers", 
      "sScrollY": 200, 
      "sScrollX": "100%", 
      "sScrollXInner": "110%", 
      "bScrollCollapse": true, 
      "fnServerData": function Data(sSource, aoData, fnCallback) { 
       $.ajax({ 
        "dataType": "json", 
        "contentType": "application/json; charset=utf-8", 
        "type": "GET", 
        "url": sSource, 
        "data": aoData, 
        "success": 
         function (msg) { 
          fnCallback(msg); 
         }, 
        "failure": 
         function (errMsg) { 
          $('#errorMessage').text(errMsg); //errorMessage with id of the div 
         } 
       }); 
      }, 
      //"bLengthChange": true, 
      "bSort": false, 
      "bAutoWidth": true, 
      "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       if (aData[4] == "Target") { 
        $(nRow).addClass("row_FollowUpNotComplete"); 
       } 
      }, 
      "fnInitComplete": function() { 
       this.fnAdjustColumnSizing(true); 
      } 
     }).columnFilter({ 
      "aoColumns": [ 
          null, //Quote ID **Hidden** 
          { "type": "text", bRegex:true }, //Customer 
          { "type": "date-range" }, //Validity 
          { "type": "text", bRegex: true }, //Quoted By 
          { "type": "text", bRegex: true }, //TMF 
          { "type": "date-range" }, //Date of follow up 
          { "type": "date-range" }, //Log Date 
          { "type": "text", bRegex: true }, //Trade 
      ] 
     }).fnSetColumnVis(0, false); 
     $('.dataTables_filter').css({ "display": "none" }); //Disable default search filter by css due to connection with column filters in the footer

截圖錯誤 DataTables Error

來源

2013-08-21 Tay

化妝確定你在你的項目中使用了相關的jqueryUI.min和jquery.min文件。 –

是的，我有他們引用，因爲我在整個應用程序中使用各種UI工具，例如日期選擇器，按鈕等 – Tay

它工作正常，只是看到醜陋，也許你有css衝突。 –

這似乎有點尷尬，但一些試驗和錯誤後，我發現，如果你註釋掉/刪除它似乎解決這個問題的「sScrollXInner」屬性。我不知道還有什麼其他情況下，這將幫助，但我想它似乎結合以下方法，幫助力柱尺寸重新調整好工作：

//DataTables property 
    "fnInitComplete": function() { 
     this.fnAdjustColumnSizing(true); 
    }

和：

//jQuery tab initialisation 
    $("#tabs").tabs({ 
     "show": function (event, ui) { 
      var table = $.fn.dataTable.fnTables(true); 
      if (table.length > 0) { 
       $(table).dataTable().fnAdjustColumnSizing(); 
      } 
     } 
    });

來源

2013-08-22 11:59:13 Tay

要爲此添加一個附註，'fnAdjustColumnSizing（）'方法的'true'參數表示所有可見的dataTable實例。 – Tay

jQuery DataTables + columnFilter插件jQuery UI選項卡的溢出問題

回答

相關問題