在动态添加的列上使用 tablesorter.js ColumnSelector

Question

我正在从包含列列表的文本文件创建 table。我原来的 table 有 2 列：名称和 ID #。我读入了一个包含各种 'scores' 的文本文件，然后执行代码：

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
            }

之后我将 table 更新为

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

但是，我最近尝试包含 ColumnSelector 小部件，以便用户可以决定要显示哪些分数列，但它不适用于我添加的列。当我只有两个原始列但当我尝试包括添加的列时它会破坏 ColumnSelector——您可以单击复选框但它不会更改列。它还不会将任何新列添加到您可以 select 的列列表中。

有人有什么想法吗？

Answer 1

您似乎在 columnSelector 代码中遇到了错误。我已经更新了 master 分支中的列选择器小部件，因此补丁将在下一个版本之前可用，但您可以 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');
  });

});

在动态添加的列上使用 tablesorter.js ColumnSelector

Using tablesorter.js ColumnSelector on dynamically added columns

jquery

tablesorter