colResizable on dynamic table not working

Reference: https://github.com/alvaro-prieto/colResizable/issues/2#issuecomment-5198584

//Disable the plugin first    
$( "#container table" ).colResizable({ disable : true });

insert_column();

//Re-init the plugin on the new elements
$( "#container table" ).colResizable({ liveDrag : true });

The answer given by Jon works. I was struggling for long time, as neither column resizing was working nor it was showing the Resizer icon between the columns.

By disabling colResizable() before modifying the HTML Table and further calling colResizable() works.

The working code after this addition is given below.

In this 'tblqresult' is the Table Id. In this code following are the sequence of steps:

  1. colResizable() is disabled first.
  2. Data in Tbody is cleared.
  3. All existing header columns are cleared.
  4. Added new columns dynamically.
  5. Function setResultTableColresizable() is called in that colResibale() is set again.
> function updateResultTableColumns(){
>         $('#tblqresult').colResizable({ disable : true });
> 
>         $('table#tblqresult tbody').empty();
>         $('#tblqresult').find('th').remove();
> 
>         //Adding columns as per select list in that order
>         $('#' + selectULiD + ' li').each(function(){
>             if( $(this).text() != 'Drop Columns here...'){
>               var th1 = $("<th></th>").text($(this).text());
>               $('table#tblqresult tr:first').append(th1);
>             }
>         });
>         setResultTableColresizable(); }
> 
> 
> function setResultTableColresizable(){  
> $("#tblqresult").colResizable({
>     fixed:false,
>     liveDrag:true,
>     gripInnerHtml:"<div class='grip2'></div>", 
>     draggingClass:"dragging"    }); }