2017-06-08 7 views
0

columns.widthオプションを使用してデータテーブルに列の幅を設定できることはわかっています。しかし、今私はxhrイベントでそのオプションを変更したい。APIを使用してデータテーブルの列幅を動的に変更する

サーバーから取得したAjaxレスポンスに基づいて、列を表示/非表示し、それに応じて他の列幅を調整したい(すべて固定サイズです)。 API経由でこれを達成する方法はありますか?

私はすべてのドキュメントを見渡しましたが、実現することはできないようです。

+0

style="width: xxx;"ように注入されているため、それが動作するか、それはすでにロードされていて、あなたがしたいです列を隠したり表示したり、Ajaxレスポンス後に他の人の幅のサイズを変更するには? –

+0

私はdatatables自体のxhrイベントでこれをやっています。基本的には、すべてのデータをサーバーから取得した後に変更を加えたいと思っています。 – AlfaTeK

+0

かなり簡単だと思います。 Uは他の条件によってチェックすることができます。 fooの場合は、barを表示/非表示にし、他の列の幅を変更します。 –

答えて

0

dataTableが有効になったら設定を変更することはできません。しかし、の場合、column.widthをオフにした場合、各列の幅は簡単に変更できます。次に例を示します。

var table = $('#example').DataTable({ 
    autoWidth: false, 
    ajax: { 
    url: 'https://api.myjson.com/bins/avxod' 
    }, 
    columns: [ 
    { data: 'name', width: 50 }, 
    { data: 'position', width: 50 }, 
    { data: 'salary', width: 50 }, 
    { data: 'office', width: 50} 
    ]  
}) 

$('#example').on('xhr.dt', function() { 
    $('#example thead th:eq(1)').width('400'); 
}) 

デモ - >http://jsfiddle.net/cc7x6h64/

column.widthあなたは、AJAXの応答後のDataTableロードしている各<th>

関連する問題