How to avoid Datatables setting width of table?

How to avoid Datatables setting width of table?

edikaedika Posts: 17Questions: 8Answers: 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

Answers

This discussion has been closed.