jQuery Datatables columnfilter width issue

我遇到了一個問題，當我將columnFilter（）應用於jQuery Datatables時，列寬變得非常大。我已經嘗試使用sWidth爲每個aColumn沒有成功。此外，我也關閉了bAutoWidth，但沒有成功。jQuery Datatables columnfilter width issue

這裏是我的dataTable：

oAgentDataTable = $("#agentDataTable").dataTable({ 
    "bServerSide": true, 
    "sAjaxSource": "Agents/GetAgents", 
    "bProcessing": true, 
    "aoColumns": [ 
     { 
      "mDataProp": "FirstName" 
     }, 
     { "mDataProp": "LastName" }, 
     { 
      "mDataProp": "AnniversaryDate", 
      "bSearchable": false, 
      "bSortable": false 
     }, 
     { "mDataProp": "Location" }, 
     { 
      "mDataProp": "Active", 
      "bSearchable": false 
     }, 
     { 
      "mDataProp": "Links", 
      "bSearchable": false, 
      "bSortable": false, 
      "fnRender": function (oObj) { 
       return "<input type='hidden' value='" + oObj.aData['ID'] + "'/>"; 
      } 
     } 
    ], 
    "fnDrawCallback": function (oSettings) { 
     $('#agentDataTable tbody tr').each(function() { 
      $(this).click(function() { 
       // Calls Agent Edit Partial 
       $.get("/Agents/Edit/" + $(this).find("td:last input").val(), function (data) { 
        $("#partialContentHolder").html(data); 
        $(".datepicker").datepicker(); 
        applyUnPaidFeeDataTable(); 
        applayPaidFeeDataTable(); 
       }); 
      }); 
     }); 
    } 
}).columnFilter({ 
    sPlaceHolder: "head:before", 
    "aoColumns": [ 
     { type: "text" }, 
     { type: "text" }, 
     { type: "date-range" }, 
     { type: "text" }, 
     { 
      type: "select", 
      values: ["True", "False"] 
     }, 
     null 
    ] 
});

標記：

<table id="agentDataTable"> 
<thead> 
    <tr> 
     <th> 
      First Name 
     </th> 
     <th> 
      Last Name 
     </th> 
     <th> 
      Anniversary Date 
     </th> 
     <th> 
      Location 
     </th> 
     <th> 
      Both 
     </th> 
     <th></th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 
<tfoot> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Anniversary Date</th> 
     <th>Location</th> 
     <th>Active</th> 
     <th></th> 
    </tr> 
</tfoot> 
</table>

這裏是在結果呈現：

Result 更新：

我想通了，這是什麼。這ASP.NET MVC生成的site.css有風格的輸入：

input, textarea { 
border: 1px solid #e2e2e2; 
background: #fff; 
color: #333; 
font-size: 1.2em; 
margin: 5px 0 6px 0; 
padding: 5px; 
width: 300px;

}

來源

2013-03-29 Packersville

我認爲CSS樣式引起廣泛列。輸入的寬度似乎用一個固定的數字來定義（可能與！重要），因此數據表不能動態計算列寬度。所以看看你的CSS樣式表，並修改輸入的寬度規格。希望這可以幫助。

來源

2013-03-29 17:41:19 ducpn

釘它。謝謝！ – Packersville

我遇到了這個問題以及Datatables。最簡單和最乾淨的修復方法是將頭文件中列的寬度設置爲一個css類。

<thead> 
    <tr> 
     <th class="firstNameColumn"> 
     First Name 
     </th> 
     <th class="lastNameColumn"> 
     Last Name 
     </th> 
     <th class="AnniversaryDataColumn"> 
     Anniversary Date 
     </th> 
     <th class="LocationColumn"> 
     Location 
     </th> 
     <th class="BothColumn"> 
     Both 
     </th> 
     <th></th> 
    </tr> 
</thead>

然後根據您是否使用響應式UI，您可以設置確切的列寬或響應的ui最小/最大寬度。還要確保綁定表以及樣式。我最終爲表格設置了一個最小寬度，這樣我的數據總能正確顯示。這對於響應式用戶界面來說並不理想，但是何時有一張桌子是理想的？哈哈。

來源

2013-03-29 18:45:56

這個CSS已經解決了這個問題對我來說

.display .text_filter { 
width: 100%; 
height: auto; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
margin: 0 auto; 
padding: 3px;

}

來源

2014-09-11 16:43:36

jQuery Datatables columnfilter width issue

回答

相關問題