1

我遇到了一个问题，当我将 columnFilter() 应用于 jQuery Datatables 时，列宽变得非常大。我尝试对每个 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;

}

4

3 回答 3

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 的理想选择，但表格何时是理想的？哈哈。

于 2013-03-29T18:45:56.413 回答
1

这个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-11T16:43:36.867 回答
0

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

于 2013-03-29T17:41:19.437 回答