0
897
ViewsJQuery 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:
1 answers
Answer question0
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>