jQuery Datatables columnfilter 宽度问题答案

【问题标题】：jQuery Datatables columnfilter width issuejQuery Datatables columnfilter 宽度问题
【发布时间】：2013-03-29 16:43:08
【问题描述】：

我遇到了一个问题，当我将 columnFilter() 应用于 jQuery 数据表时，列宽变得非常大。我尝试对每个 aoColumn 使用 sWidth ，但没有成功。另外，我也关闭了 bAutoWidth，但没有成功。

这是我的数据表：

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>

这是渲染后的结果：

更新：

我知道它是什么。 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;

}

【问题讨论】：

标签： c# jquery .net datatables

【解决方案1】：

我在使用 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 最小/最大宽度。还要确保使用样式绑定表格。我最终为表格设置了最小宽度，以便我的数据始终正确显示。它不是响应式 UI 的理想选择，但表格何时是理想的？哈哈。

【讨论】：

【解决方案2】：

这个 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;

}

【讨论】：

【解决方案3】：

我认为 css 样式会导致宽列。输入的宽度似乎是用固定数字定义的（可能是！important），因此数据表无法动态计算列宽。因此，请查看您的 css 样式表并更正输入的宽度规范。希望这会有所帮助。

【讨论】：