2

DataTables プラグインは、レンダリングのカスタマイズを許可していないようです。

aTargets と mRender を使用して、初期化時にセルのレンダリングをカスタマイズできます。

"aoColumnDefs": [{
    "aTargets": [transaction_id_index],
"mRender": function (data, type, row) {
    return 'custom '+data;
    }
}]

テーブルヘッダーに対して同じことを行うにはどうすればよいですか?

注: 表示と非表示の機能を使用しているため、aoColumns の sTitle を直接変更することはできません。

編集

列の幅を最小限に抑えるために、列のタイトルの名前を変更したいと考えています。「foo_bar」のような sTitle を取得しました。今のところ私はこれを使用していますが、確かに最善の方法ではありません:

'fnInitComplete': function(oSettings, json){
    $(table).find("thead tr th").each(function(index) {
        $(this).html($(this).html().split("_").join("<br>"));
    });
},
"fnDrawCallback": function( oSettings ) {
    // TO IMPROVE
    $(table).find("thead tr th").each(function() {
        if($(this).text().indexOf("_") !== -1) {
            $(this).html($(this).text().split("_").join("<br>"));                                        
        }
    });
}

ヒントをくれた @kabstergo に感謝します! 私の解決策は「クリーン」ではないため、この質問を閉じません。

4

2 に答える 2

2

はい、ヘッダーとフッターをカスタマイズできます。誰もあなたに答えようとしないからです。注：データテーブルが内部でどのように機能するかについての専門家ではありません。

ここの私たちのウェブサイトには、カスタムヘッダーを持つデータテーブルがあります。そして、これはこれを行うことによって作られています

var table = $('#my-datatable');
table.dataTable({
  ...
  'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
  'fnInitComplete': function(oSettings){
    // Style length select
    table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
    tableStyled = true;
  }
});

私が言ったように、何かを始めるのに役立つことを願っています...

于 2013-07-11T16:53:48.467 に答える
2

DataTables ^1.10 にはheaderCallback、初期化オプションで提供できるフックがあります。

例

（$jQueryです）

$('#example').DataTable({
    headerCallback: function headerCallback(thead, data, start, end, display) {
        $(thead)
            .find('th')
            .first()
            .html('Displaying ' + (end - start) + ' records');
    }
});

DataTables ドキュメントに記載されている内容とは対照的に、最初のパラメーターは実際にはtr内の最初のパラメーターである可能性があり、thead必ずしも要素自体ではないことに注意してください。thead

複数のヘッダー行 ( tr) がある複雑なシナリオでは、次のように選択する必要がある場合があります。

$('#example').DataTable({
    headerCallback: function headerCallback(thead, data, start, end, display) {
        $(thead)
            .closest('thead')
            .find('th')
            .first()
            .html('Displaying ' + (end - start) + ' records');
    }
});
于 2016-09-27T15:38:14.243 に答える