tablesorter不工作，当我添加更多的列

Question

我有一个表，我在第二列排序。默认情况下，我有8列 和行可以有所不同，取决于我添加了多少事情。

的分拣工作时，我有标准的8列，但是当我标记一个复选框，并保存这表明，更多信息将在我的表dynamiclly产生则排序不工作了。

代码：

$.tablesorter.addParser({ 
        id: 'input_text', 
        is: function (s) { 
         // return false so this parser is not auto detected 
         return false; 
        }, 
        format: function (s) { 

         return s; 
        }, 
        type: 'text' 
       }); 

       // Tablesorter 
       if ($(".attendanceList tbody tr").length > 0) { 
        $(".attendanceList").tablesorter({ headers: { 1: { sorter: false }, 
         2: { sorter: 'input_text' }, 
         3: { sorter: false }, 
         4: { sorter: false }, 
         5: { sorter: false }, 
         6: { sorter: false }, 
         7: { sorter: false }, 
         8: { sorter: false }, 
         9: { sorter: false }, 
         10: { sorter: false } 
        }, 
         sortList: [[2, 0], [0, 0]] 
        }); 
       } 

我用萤火虫，看看有什么问题是，我的“S” paramater（查看以上）是百达一个空字符串（“”）。

步步： 我标记复选框，并按保存按钮。当完成后，我按下另一个按钮，触发一个弹出窗口并获取我的表格，现在该表格有10列，但第二列不再像之前那样执行排序。

我错过了什么？我对tablesorter插件读了，我还没有发现有类似问题的人，

谢谢！

Answer 1

我看到你所描述的两个问题;并希望你使用我的fork of tablesorter。

1）为了得到一个复选框的值，你需要搜索的单元格输入并检查更新。请注意，此解析器将与原始的tablesorter一起工作，但不会更新（正确使用updateCell方法）。请注意，此代码来自parser-input-select.js file，可见于this demo。

// Custom parser for including checkbox status if using the grouping widget 
// updated dynamically using the "change" function below 
$.tablesorter.addParser({ 
    id: "checkbox", 
    is: function(){ 
     return false; 
    }, 
    format: function(s, table, cell) { 
     // using plain language here because this is what is shown in the group headers widget 
     // change it as desired 
     var $c = $(cell).find('input'); 
     return $c.length ? $c.is(':checked') ? 'checked' : 'unchecked' : s; 
    }, 
    type: "text" 
}); 

// update select and all input types in the tablesorter cache when the change event fires. 
// This method only works with jQuery 1.7+ 
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired 
// if this code interferes somehow, target the specific table $('#mytable'), instead of $('table') 
$(window).load(function(){ 
    // resort the column after the input/select was modified? 
    var resort = true, 
    // this flag prevents the updateCell event from being spammed 
    // it happens when you modify input text and hit enter 
    alreadyUpdating = false; 
    $('table').find('tbody').on('change', 'select, input', function(e){ 
     if (!alreadyUpdating) { 
      var $tar = $(e.target), 
       $table = $tar.closest('table'); 
      alreadyUpdating = true; 
      $table.trigger('updateCell', [ $tar.closest('td'), resort ]); 
      // updateServer(e, $table, $tar); 
      setTimeout(function(){ alreadyUpdating = false; }, 10); 
     } 
    }); 
}); 

2）不是清楚这个问题的唯一的事情是，如果表被弹出内动态构建，或者如果与复选框表被修改，然后复制到一个弹出？

请注意，上述方法只会更新表格中复选框的状态。它不会包含任何动态添加的列到已经初始化的表。在这种情况下，您需要使用updateAll method，但需要在之后触发表内容已更新。

$table.trigger('updateAll', [ resort ]); 

如果你能分享那就是“节能”的复选框的选择和初始化弹出窗口的时间之间运行的代码，这将有助于使问题更加清晰。

---

更新：要解析输入，您需要获取输入元素的值。解析器格式函数中的s仅包含表格单元格中找到的文本。当表格单元格中只有一个输入时，由于输入元素不包含文本，因此没有文本被返回，因此它有一个值。因此，不要使用我在上面分享的“复选框”解析器，使用这个“输入”解析器;但如前所述，此解析器将与原始版本的tablesorter（v2.0.5）一起使用，但如果使用“updateCell”方法将无法正常工作。

$.tablesorter.addParser({ 
    id: "inputs", 
    is: function(){ 
     return false; 
    }, 
    format: function(s, table, cell) { 
     return $(cell).find('input').val() || s; 
    }, 
    type: "text" 
}); 

这个解析器也需要如上所示，以允许更新所述解析的输入，用于当用户改变它排序$(window).load(...)内的代码。

Answer 2

插入动态生成的内容后，您只需触发更新即可。它看起来像你的表与“attendanceList”类识别，从而动态更新后的命令是：

$(".attendanceList").trigger("update");