$.fn.dataTable.adjustColumnSizing() not a function (DataTables 1.12.1)

Dondon

Hi All,

I'm running DataTables 1.12.1, I need to set autoWidth for columns0 to 2 and set column3 to full width with wrapping, I have tried below:

but why the it keeps returning adjustColumnSizing() not a function? what did I miss?

$.fn.dataTable.ext.errMode = 'none';

var table = $('.datatables-basic');

alert($.fn.dataTable.version);

if ($.fn.DataTable.isDataTable(table)) {
// If the table has already been initialized, destroy it
table.DataTable().destroy();
}

var jsonData = @Html.Raw(Json.Serialize(Model.auditData));

await table.DataTable({
responsive: true,
lengthChange: true,
paging: true,
pagingType: 'full',
searching: true,
fixedHeader: {
header: true,
footer: true
},
info: true,
autoWidth: false,
filter: true,
order: [[0, 'desc']],
columnDefs: [
{ autoWidth:true, className: "dt-nowrap", targets: [0, 1, 2] },
{ width: '70%', targets: [3] }
],
data: jsonData,
columns: [
{ data: 'eventDateTime', className: 'align-left', orderable: true },
{ data: 'userName', className: 'align-left', orderable: true },
{
data: 'eventName',
render: function (data, type, row)
{
var ret = '<span class="badge rounded-pill badge-light-secondary">' + row.eventName + '</span>';
if (row.eventId === 1)
ret = '<span class="badge rounded-pill badge-light-danger">' + row.eventName + '</span>';
if (row.eventId === 2)
ret = '<span class="badge rounded-pill badge-light-warning">' + row.eventName + '</span>';
if (row.eventId === 3)
ret = '<span class="badge rounded-pill badge-light-info">' + row.eventName + '</span>';
if (row.eventId === 99)
ret = '<span class="badge rounded-pill badge-light-success">' + row.eventName + '</span>';

            return ret;
        }
    },
    { data: 'eventDescription', className: 'align-left', orderable: true },
    { data: 'dataLog', className: 'align-left', visible:false },
],
dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
buttons: [
    {
        text: 'Empty',
        className: 'btn btn-warning btn ms-2',
        enabled: true,
        attr: {
            'data-bs-toggle': 'modal',
            'data-bs-target': '#modals-slide-in'
        },
        init: function (api, node, config)
        {
            $(node).removeClass('btn-secondary');
        },
        action: function ()
        {
            $("#backdrop").modal('show')
        }
    },
    {
        text: 'Exit',
        className: 'btn btn-outline-secondary',
        action: function (e, dt, node, config)
        {
            location.href = '@Url.Action("Index", "Dashboard", new { id = Model.id })';
        }
    }
]

}).on('error.dt', function (e, settings, techNote, message)
{
showError(message);
location.reload();

return false;

});

$.fn.dataTable.adjustColumnSizing();

kthorngren

It looks like adjustColumnSizing() is an API from Datatables 1.9. Looking at the Conversion guide from 1.9 to 1.10 it looks like you should be using columns.adjust() instead.

Note that Datatables 2 is the current version of Datatables actively being developed.

Kevin

allan

It might be a little more than that - $.fn.dataTable.adjustColumnSizing() is a static call, and not one that DataTables ever had I think. Moreover, the legacy API always started with fn for its methods, so I'm not sure where you got adjustColumnSizing() from @Dondon?

Furthermore:

await table.DataTable({

The DataTables initialisation is always synchronous. It never returns a promise, so I'm not sure why you'd use an await there? Perhaps some of this is AI generated?

Do:

let table = table.DataTable({

And then call the method Kevin suggests:

table.columns.adjust();

Although with 2.2+ you shouldn't need to call it - it will do it automatically.

Allan