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 に答える
0

CSSスタイルが幅の広い列の原因だと思います。入力の幅は固定数で定義されているようです (!important を使用している可能性があります)。そのため、データ テーブルは列幅を動的に計算できません。css-stylesheet を調べて、入力の幅の指定を修正してください。お役に立てれば。

于 2013-03-29T17:41:19.437 に答える