Question

我遇到了一个问题，当我将columnFilter（）应用于jQuery Datatables时，列宽变得非常大。我尝试过为每个aoColumn使用sWidth但没有成功。另外，我也关掉了bAutoWidth，没有成功。

这是我的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;

}

Answer 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>

然后，根据您是否使用自适应用户界面，您可以设置确切的列宽或响应的最小/最大宽度。还要确保将表格与样式绑定在一起。我最终为表格设置了一个最小宽度，以便我的数据始终正确显示。它不是理想的响应式用户界面，但什么时候有一个表是理想的？哈哈。

Answer 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;

}

Answer 3

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

jQuery Datatables columnfilter width问题

3 个答案: