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");