在ajax加载后，JQuery DataTables.net自定义列宽不起作用

Question

我遇到了jQuery数据表的问题。从这个定义可以看出，该表的数据源是一个ajax调用。一切运行正常，数据显示，但列宽度不受尊重。当表格显示时，两列的宽度大致相等。我附上了一个屏幕截图来显示行为。当我稍微调整对话框的大小时，一切都会卡入到位。

这是表格HTML和DataTables（）调用：

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

数据表调用：

$(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}
        ]
    });

数据表位于jQueryUI对话框中。这是第一次显示时的样子：

Answer 1

由于DataTables的实现方式，您可以设置除一个列之外的所有列的宽度。然后该列被设计为占据剩余的空间。

然而，我们并不想要那样。所以，我所做的是在文件的CSS部分添加一个新条目。

我补充说：

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

这使得整个表的宽度不会超过580px。我通过将两列宽度加在一起（80px + 500px）得到了这个数字。然后我删除了＆＃34;注意＆＃34;下的宽度代码。现在它完美无缺。

<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>