CODEWITHSUNDEEP
jquerydatatables
Learner
Learner

Reputation: 2339

How to reset the table width dynamically - Datatables?

I am using kike table plugin to expand / shrink the column width dynamically. Everything seems to work fine except for the fact that when the column width is reduced the table width is not getting reduced hence the last column of the table occupies the available extra width.

Is there a way to reset the column width back to original column width?

I have sScrollx set to 100%

"sScrollX": "100%",

I have a function to reset the table back to its original width.

function resizeTable(tableId)
{
var oTable = $("#" + tableId).dataTable();
var oSettings = oTable.fnSettings();
oSettings.oScroll.sX = "840px"; // <- updated!
oTable.fnDraw(false);
}

I tried the above code to reset the scroll x value on click of a button but this doesn't seem to have any effect with respect to the width of the table.

I tried using oTable.fnAdjustColumnSizing(); but it didn't help me either...

Can someone please let me know best possible way to fix this issue?

Upvotes: 2

Views: 2154

Answers (2)

Learner
Learner

Reputation: 2339

Kike table (table class) was overriding datatable (class) hence I was not able to use any of the datatables function on these tables hence I came up with a solution as below,

function resizeDataTable(dataTableid){
 $("#" + dataTableid).removeClass('kiketable-colsizable'); // Remove kike column class
    var oTable = $("#" + dataTableid).dataTable(); 
    $(oTable).css({ width: $(oTable).parent().width() }); // Perform datatable functions
    oTable.fnAdjustColumnSizing(); 
  $("#" + dataTableid).addClass('kiketable-colsizable'); // Add kike column class
}

This works flawlessly.

Upvotes: 1

AnthonyLeGovic
AnthonyLeGovic

Reputation: 2335

You can try to specify bAutoWidth : false in your dataTables settings.

Upvotes: 5

Related Questions