web-dev-qa-db-ja.com

jquery datatable-列幅の設定とテキストの折り返し

JqueryデータテーブルにScrollerプラグインを使用して、仮想スクロールを許可しています。ただし、切り捨てられたテキストではなくテキスト全体を表示したいため、セル内でのテキストの折り返しをサポートする必要があります。デフォルトではテキストをラップしないことに気付きました。この機能をサポートする方法はありますか？可能な回避策はありますか？

フィドラーhttps://jsfiddle.net/Vimalan/2koex0bt/1/

htmlコード：

<table id="example" class="display" cellspacing="0" width="100%"></table>

jsコード：

var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations."
var dataList = [];

for (var i=1; i<=500; i++)
{
    var dataRow = {};

    dataRow.ID = i;
    dataRow.FirstName = "First Name " + i;
    dataRow.LastName = "Last Name " + i;

    if (i%5 ==0)
    {
        dataRow.Details = detailsSample;
    }
    else
    {
        dataRow.Details = "Large text "+i;
    }
    dataRow.Country = "Country Name";

    dataList.Push(dataRow);
}

$('#example').DataTable( {
                data:                       dataList,
        deferRender:    true,
        scrollX:                true,
        scrollY:        200,
        scrollCollapse: true,
        scroller:       true,
        searching:          false,
        paging:                 true,
        info:                   false,
        columns: [
                { title: "ID", data: "ID" },
                { title: "First Name", data: "FirstName" },
                { title: "Change Summary", data: "LastName"},
                { title: "Details", data: "Details", "width": "400px"  },
                { title: "Country", data: "Country" }               
            ]
    } );

期待値

上記の表では、「詳細」列の幅は常に400ピクセルで、その列のテキストは折り返されている必要があります。

どんな提案も大歓迎です。

javascriptjqueryhtmlcssdatatables
7
Vimalan Jaya Ganesh

Divに列データをラップし、divの空白、幅cssプロパティを設定することで解決策を見つけました。

フィドラー：https://jsfiddle.net/Vimalan/2koex0bt/6/

[〜＃〜] js [〜＃〜]

$('#example').DataTable( {
        data:           dataList,
        deferRender:    true,
        scrollX:        true,
        scrollY:        200,
        scrollCollapse: true,
        scroller:       true,
        searching:      false,
        paging:         true,
        info:           false,
        columns: [
                { title: "ID", data: "ID" },
                { title: "First Name", data: "FirstName" },
                { title: "Change Summary", data: "LastName"},
                { title: "Details", data: "Details" },
                { title: "Country", data: "Country" }               
            ],
            columnDefs: [
                {
                    render: function (data, type, full, meta) {
                        return "<div class='text-wrap width-200'>" + data + "</div>";
                    },
                    targets: 3
                }
             ]
    } );

[〜＃〜] css [〜＃〜]

.text-wrap{
    white-space:normal;
}
.width-200{
    width:200px;
}
20
Vimalan Jaya Ganesh

スタイルシートを追加するかどうかはわかりませんが、テーブルレイアウトを固定に設定し、空白を追加します。現在、あなたがやろうとしていることを無効にするwhite-space：no-wrapを使用しています。また、すべてのtdにmax-widthを設定し、オーバーフローが発生するたびにこれが行われるようにします。

これをjQUeryの最後に追加します

https://jsfiddle.net/2koex0bt/5/

$(document).ready(function(){
    $('#example').DataTable();
    $('#example td').css('white-space','initial');
});

APIのみを使用する場合は、これを実行します（スタイル設定を変更するためにCSSを追加します）。

CSSを使用する場合は、次の操作を行います。

table {
  table-layout:fixed;
}
table td {
  Word-wrap: break-Word;
  max-width: 400px;
}
#example td {
  white-space:inherit;
}
8
Keith