並べ替えイメージをDataTableの列ヘッダーに合わせる方法

Question

私はdatatableでページを作成しました。データテーブルが表示されている場合しかし、ソートの画像が次の行に表示されます。

これは、テーブルが定義されている方法です。

$("#tblTable").dataTable(
    { 
     "sDom": 't<"F"i>', 
     "aoColumns": [ 
      {"sWidth": "17%", "sType": "string", "bSortable": true }, 
      {"sWidth": "10%", "sType": "string", "bSortable": true }, 
      {"sWidth": "15%", "sType": "string", "bSortable": true }, 
      {"sWidth": "58%", "sType": "string", "bSortable": false}     
     ], 
     "sScrollY": "180px", 
     "bPaginate": false, 
     "bFilter": false, 
     "aaSorting": [], 
     "bAutoWidth": false, 
     "bInfo": true, 
     "bJQueryUI": true 
    }); 

が可能で、テーブルdefenitionの内側にそれを修正することですか？

Answer 1

はい...あなたは、各列がそうのように使用している合計の割合を調整することができます。

"aoColumns": [ 
      {"sWidth": "15%", "sType": "string", "bSortable": true}, 
      {"sWidth": "15%", "sType": "string", "bSortable": true }, 
      {"sWidth": "15%", "sType": "string", "bSortable": true }, 
      {"sWidth": "55%", "sType": "string", "bSortable": false}     
     ], 

はあなたの2番目の列は10％で、ほんの少し狭すぎだったように見えます。

また、あなたはすべてのsWdith設定を削除し、bAutoWidth（"bAutoWidth": true,）trueに切り替えることができ

Answer 2

私は解決策を見つけた：データテーブルがレンダリングされるとき は基本的に、ソート矢印部分はspan面積によって表現されています <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s" style="vertical-align: middle; display: inline-block;"

データテーブル定義に$('.ui-icon').css('display', 'inline-block')を追加する必要がありました。

それは私のためにそれを修正しました。

誰かを助けることを望みます。