1

我有一张桌子，我在第二列上排序。默认情况下，我有 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]]
                    });
                }

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

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

我错过了什么吗？我已经阅读了 tablesorter 插件，但没有发现任何有类似问题的人，

谢谢！

4

2 回答 2

2

我看到您所描述的两个问题；并希望您使用我的 tablesorter 叉子。

1) 要获取复选框的值，您需要在单元格中搜索输入并检查更新。请注意，此解析器将与原始 tablesorter 一起使用，但不会updateCell正确更新（使用该方法）。请注意，此代码来自parser-input-select.js文件，并且可以在此演示中看到。

// 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) 唯一不清楚的问题是表是在弹出窗口中动态构建的，还是带有复选框的表正在修改，然后复制到弹出窗口？

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

$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(...)上面显示的代码，以允许在用户更改输入时更新已解析的输入以进行排序。

于 2013-07-15T15:44:53.843 回答
0

插入动态生成的内容后，您只需要触发更新。看起来你的表是用“ attendanceList”类标识的，所以动态更新后的命令是：

$(".attendanceList").trigger("update");
于 2013-07-16T13:16:50.717 回答