jQuery DataTables.netカスタム列の幅がajaxのロード後に機能しない

Question

jQueryデータテーブルに問題があります。この定義からわかるように、テーブルのデータソースはajax呼び出しです。すべて正常に実行され、データが表示されますが、列の幅は考慮されません。表が表示されているとき、2つの列にはほぼ等しい幅が与えられます。私は動作を示すためにスクリーンショットを添付しました。私が少しでもダイアログのサイズを変更すると、すべてが適所にスナップします。ここで

は、テーブルのHTMLとのDataTable（）の呼び出しです：

<table id="tblNotes" style="width:100%"> 
    <thead> 
    <tr> 
     <th width="80px">Date</th> 
     <th width="500px">Note</th> 
    </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

はとのDataTableを呼び出す：

$(document).ready(function(){ 
    $("#tblNotes").DataTable({ 
     "ajax" : { 
      "url": "/projects/ajaxGetProjectNotes/", 
      "type" : "post", 
      "dataType" : "json", 
      "data" : function(d){ 
       return { 
        idProject : $("#pn-idProject").val() 
       }; 
      } 
     }, 
     "columns" : 
     [ 
      {"data" : "dComment", "width" : "80px", "orderable" : true}, 
      {"data" : "cComment", "width" : "500px", "orderable" : false} 
     ] 
    }); 

のDataTableがjQueryUIダイアログです。ここではそれが最初に表示するときのようになります。そのためのDataTableの実装方法の

Answer 1

は、あなたはすべての列が、1つのための幅を設定することができます。その列は残りのスペースを占めるように設計されています。

しかし、私たちはそれを望んでいません。だから、私がやったのは、ファイルのCSS部分に新しいエントリを入れたことです。

私が追加：

table#tblNotes { 
    max-width:580px; 
} 

を幅がテーブル全体のため580pxを超えないように、これはそれを作ります。私はあなたの2つの列幅を一緒に加えることによってその数を得ました（80px + 500px）。私はあなたの幅のコードを "メモ"の下で削除しました。そして今、それは完全に動作します。

<style> 

table#tblNotes { 
    max-width:580px; 
} 

</style> 

<div class="container"> 
    <table id="tblNotes" style="width:100%"> 
     <thead> 
     <tr> 
      <th width="80px">Date</th> 
      <th>Note</th> 
     </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" /> 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#tblNotes").DataTable({ 
     "ajax" : { 
      "url": "test.json", 
      "type" : "post", 
      "dataType" : "json", 
      "data" : function(d){ 
       return { 
        idProject : $("#pn-idProject").val() 
       }; 
      } 
     }, 
     "columns" : 
     [ 
      {"data" : "dComment", "width" : "80px", "orderable" : true}, 
      {"data" : "cComment", "width" : "500px", "orderable" : false} 
     ] 
    }); 
}); 
</script>