Question

我有一张桌子，我在第二列排序。默认情况下我有8列行可以有所不同，具体取决于我添加的内容。

当我有标准的8列时排序工作，但当我标记一个复选框并保存时，表示将在我的表中动态生成更多信息，那么排序不再有效。

代码：

  $.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]]
                    });
                }

我用firebug看问题是什么，我的“s”参数（上面检查）总是一个空字符串（“”）。

一步一步：我标记一个复选框并按下保存按钮。当完成后我按下另一个触发弹出窗口的按钮并将我的表格给我，现在该表格有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 ]);

如果您可以共享在“保存”复选框选项和初始化弹出窗口之间运行的代码，则有助于使问题更加清晰。

更新：要解析输入，您需要获取input元素的值。解析器格式函数中的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");

当我添加更多列时，tablesorter不起作用

2 个答案: