How to avoid Datatables setting width of table?
How to avoid Datatables setting width of table?
edika
Posts: 20Questions: 9Answers: 0
I have a width problem with a table populated via ajax. I've notice that datatables set a fixed width on the table tag with a style='width:xxxxpx'. The same table with the same data but populated directly when created (asp.net) does not have a fixed width set.
The problem is that when the window is resized the table will overflow.
I'm using bootstrap. This is the html code of the empty table:
<div class="table-responsive">
<table id="tbMessaggi" class="table table-hover table-striped compact">
<thead class="desktop-only">
<tr>
<th id="thcheck" runat="server" class="no-sort">
<input type="checkbox" id="chkAllMessage" class="form-input-switchery" /></th>
<th id="threply" runat="server" class="no-sort"></th>
<th><%= Devmail4.Properties.Resources.data %></th>
<th id="thuser" runat="server"></th>
<th><%= Devmail4.Properties.Resources.oggetto %></th>
<th id="thgest" runat="server"><%= Devmail4.Properties.Resources.gestitoda %></th>
</tr>
</thead>
<tbody id="tbody" runat="server">
</tbody>
</table>
</div>
This is the function for the table pre-populated serverside:
function initDataTable() {
var dataTable = $("#tbMessaggi").DataTable({
columnDefs: [
{ targets: 'no-sort', orderable: false }
],
order:[],
bPaginate: false,
bInfo: false,
"initComplete": function (settings, json) {
initMsgHelper();
App.initSwitchery();
}
});
}
and this is for the one for the populated via Ajax
function initDataTable() {
var totrecord = 0;
var count = 0;
var tipoRecord;
var end = true;
var nextSes = "";
dataTable = $("#tbMessaggi").DataTable({
"deferRender": true,
ajax: {
type: "POST",
url: "MailServices.asmx/GetCurrData",
contentType: "application/json; charset=utf-8",
dataType: "json",
dataSrc: function (data) {
var d = $.parseJSON(data.d);
totrecord = d.recordsTotal;
count = d.recordsCount;
tipoRecord = d.tipoRecord;
end = d.end;
nextSes = d.nextSesName;
return d.data;
}
},
columnDefs: [
{ "targets": 'no-sort', orderable: false },
{
"targets": 5,
"createdCell": function (td, cellData, rowData, row, col) {
if (tipoRecord === 'Ricevuti' && rowData.Gestore !== '') {
$(td).css('background-color', rowData.GestoreColor);
}
}
},
{
"targets": 2,
"createdCell": function (td, cellData, rowData, row, col) {
$(td).attr("data-order", rowData.DataOrder);
console.log(rowData.DataOrder);
}
}
],
columns: [
{
"data": null,
"className": "desktop-only",
"render": function (data) {
if (tipoRecord === 'Ricevuti')
return "<input type='checkbox' class='chkMessage form-input-switchery' />";
else if (tipoRecord === 'Modelli' && data.Modificabile)
return "<a href='javascript: cancella(" + data.IdMessaggio + ",'model');><i class='icon-trash text-danger'/></a>";
else if (tipoRecord === 'Bozze')
return "<a href='javascript: cancella(" + data.IdMessaggio + ",'bozza');><i class='icon-trash text-danger'/></a>";
else
return "";
}
},
{
"className": "text-nowrap desktop-only",
"data": null,
"render": function (data, type, row) {
var retval = "";
if (data.HasAllegati)
retval = "<i class='icon-attachment ml-2'>";
if (tipoRecord === 'Ricevuti' && data.HasRisposte)
retval += "<I class='icon-reply text-indigo ml-2'>";
return retval;
}
},
{
"className": "desktop-only",
"data": null,
"render": function (data, type, row) {
var rclass = "read";
if (tipoRecord === 'Ricevuti')
rclass = data.Letto ? "read" : "toread";
return "<div class='font-size-sm line-height-1 " + rclass + "'>" + data.DataInvio + "</div>";
}
},
{
"className": "desktop-only",
"data": null,
"render": function (data, type, row) {
var rclass = "read";
if (tipoRecord === 'Ricevuti')
rclass = data.Letto ? "read" : "toread";
var retval = "<div class='d-flex align-items-center'>";
if (tipoRecord === 'Ricevuti' || tipoRecord === 'Modelli') {
if (data.HasFoto)
retval += "<div class='mr-3'><a><img src='" + data.Foto + "' class='rounded-circle' width='32' height='32'></img></a></div>";
else
retval += "<div class='mr-3'><a class='btn bg-teal-400 rounded-round btn-icon btn-sm'><span class='letter-icon'></span></a></div>";
}
retval += "<div><span class='text-default " + rclass + " letter-icon-title'>" + data.Utente + "</span></div></div>";
return retval;
}
},
{
"data": null,
"render": function (data, type, row) {
var rclass = "read";
if (tipoRecord === 'Ricevuti')
rclass = data.Letto ? "read" : "toread";
var retval = "<div class='mobile-only'><span class='text-default " + rclass + "'>" + data.Utente + "</span><span class='float-right font-08 text-muted'>" + data.DataInvio + "<i class='mobile-only icon-attachment ml-2'></i></span></div><a href='javascript: leggi(" + data.IdMessaggio + ")'><div class='" + rclass + "'>" + data.Oggetto + "</div><span class='text-muted'>" + data.Soggetto + "</span></a>";
return retval;
}
},
{
"className": "desktop-only tdgest",
"data": null,
"render": function (data, type, row) {
var rclass = "read";
if (tipoRecord === 'Ricevuti')
rclass = data.Letto ? "read" : "toread";
var retval = "";
if (tipoRecord === 'Ricevuti' && data.Gestore !== "")
retval = "<span class='text-default spangest " + rclass + "'>" + data.Gestore + "</span>";
return retval;
}
}
],
"createdRow": function (row, data, dataIndex) {
$(row).attr('data-idmsg', data.IdMessaggio);
$(row).attr('data-letto', data.Letto ? "1" : "0");
$(row).attr('data-tipo', tipoRecord);
},
order: [],
bPaginate: false,
bInfo: false,
"initComplete": function (settings, json) {
initMsgHelper();
if (!end) {
getTheRest(nextSes, count, totrecord);
}
else
App.initSwitchery();
var api = this.api();
api.column(0).visible(tipoRecord !== 'Inviati');
api.column(2).visible(tipoRecord !== 'Bozze');
api.column(1).visible(tipoRecord === 'Ricevuti' || tipoRecord === 'Inviati');
api.column(5).visible(tipoRecord === 'Ricevuti');
}
});
}
Is there a way to avoid Datatables fixing the width of the table in the Ajax populated version? Why in the first case the width is not set?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You could try setting
autoWidth. If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.Cheers,
Colin
See if this example helps:
https://datatables.net/examples/basic_init/flexible_width.html
Kevin