Compatibility issue in DataTable 2.0.0

[tufail-cedcommerce]

Hi @dhobi, @jstark518, @jqnatividad, @Javaman1138 and @hchiam, could you please upgrade this plugin so it can work with DataTable 2.0.0 too?

Thank you.

[rahul-katikineni]

I have been able to make minor modifications for it to work with 2.0 Please have a look and see if it helps.

jquery.dataTables.colResize.txt

[tufail-cedcommerce]

I have been able to make minor modifications for it to work with 2.0 Please have a look and see if it helps.

jquery.dataTables.colResize.txt

First of all thanks for the modification.

I've tried using it but it is only resizing the first two rows(this only happens when I don't reduce the number of columns). I need it to resize the complete column. I'm using Server-side processing(AJAX) for populating the data. The table has more than 40 columns. When I reduced the number of columns and tried to fit them into the screen it worked but as soon as we got the horizontal scroll bar(due to a large number of columns) then it stopped working.

I'm using this(scrollX: true) and the table is looking is like this.

My table looks like this.

Could you please help here @rahul-katikineni.

[mvksages]

Do we have any updates on this ? This is very helpful if it works with latest DataTable. Great feature by the way. Worth having it as part of the main github lib.

[fdaugan]

I cannot create a MR based on @rahul-katikineni work because there are too much changes.

However, after few changes changes I got the desired behavior.

Merged file: jquery.dataTables.colResize.js

Changes:

    _fnApplyWidthColumn: function (column, width) {
++    [$(column.nTh.table().context[0].colgroup).find('col')[column.idx], $(column.nTh).closest('table').find('colgroup col')[column.idx]].filter(a => a).forEach(a => a.style = `width:${width}px`);
      $(column.nTh).outerWidth(width + "px");
      column.sWidth = width + "px";
    }

Whith scrollX and orderCellsTop options, extra configuration to avoid trimmed table:

onResize: function (column) {
    const $wrapper = $table.closest('.dt-layout-table');
    const targetWidth = $wrapper.find('.dt-scroll-headInner').width();
    $wrapper.find('table').width(targetWidth).css('max-width', `${targetWidth}px`);
}

Behavior: