Using tablesorter.js ColumnSelector on dynamically added columns

Question

I am creating a table from a text file that contains a list of columns. My original table has 2 columns: a name and ID #. I read in a text file with various 'scores' and then execute the code:

myform.find('tr').each(function(){
            var trow = $(this);
            if(trow.index() === 0){
                trow.append("<th style=\"width:100px\" data-priority=\"4\" data-sortinitialorder=\"asc\" data-placeholder=\"Ex: 255\">" + score + "</th>");
            }else if(trow.index() === 2){
                trow.append('<td></td>');  //eventually this will add data but right now I'm just testing it so I'm just adding a blank row
            }

after which I update the table with

var resort = true, 
    callback = function(myform){
    };
    $("table").trigger("updateAll", [ resort, callback ]);

However, I recently tried to include the ColumnSelector widget so that the user could decide which score columns to display, and it won't work with my added columns. It works when I just have the two original columns but when I try to include the added columns it breaks the ColumnSelector--you can click on the checkboxes but it doesn't change the columns. It also doesn't add any of the new columns to the list of columns you can select.

Anyone have any ideas?

Answer 1

It looks like you encountered a bug in the columnSelector code. I've updated the column selector widget in the master branch, so the patch won't be available until the next release, but you can copy the file directly from here.

Here is a demo of the fix.

$(function() {

  var $t = $('table');
  $t.tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'columnSelector', 'stickyHeaders'],
    widgetOptions: {
      // target the column selector markup
      columnSelector_container: $('#columnSelector')
    }
  });

  $('button').click(function() {
    $t.find('thead tr').append('<th>Data</th>');
    $t.find('tbody tr').each(function() {
      $(this).append('<td>' + Math.round(Math.random() * 100) + '</td>');
    });
    $t.trigger('updateAll');
  });

});