CODEWITHSUNDEEP
jqueryajaxdatatables
Menachem Bazian
Menachem Bazian

Reputation: 417

JQuery DataTables.net custom column width doesn't work after ajax load

I have a problem with a jQuery datatable. As you can see from this definition, the data source of the table is an ajax call. Everything runs fine and the data shows but the column widths are not respected. When the table displays, the two columns are given more or less equal widths. I have attached a screen shot to show the behavior. When I resize the dialog even a little bit, everything snaps into place.

Here's the table HTML and the DataTables() call:

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

And the datatables call:

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

The datatable is in a jQueryUI Dialog. Here's what it looks like when first displayed:

When it starts

When resized

Upvotes: 1

Views: 2011

Answers (1)

Neil
Neil

Reputation: 14313

Because of how DataTables is implemented, you can set the width for all columns but one. That column is then designed to take up the rest of the space.

However, we don't want that. So, what I did was put a new entry into the CSS portion of the file.

I added:

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

This makes it so that the width will not exceed 580px for the entire table. I got that number by adding your two columns width's together (80px + 500px). I then removed your width code under "note". And now it works perfectly.

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

Upvotes: 1

Related Questions