Question

我正在从包含列列表的文本文件创建表。我的原始表有2列：名称和ID＃。我在一个带有各种分数的文本文件中读到了＃39;然后执行代码：

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
            }

之后我用

更新表格

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

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

有人有什么想法吗？

Answer 1

看起来您遇到了columnSelector代码中的错误。我已更新主分支中的列选择器小部件，因此该修补程序在下一个版本之前无法使用，但您可以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

1 个答案: