按输入值对 Tablesorter 列进行排序答案

【问题标题】：Sorting Tablesorter columns by input value按输入值对 Tablesorter 列进行排序
【发布时间】：2013-08-30 11:16:40
【问题描述】：

我正在使用 jQuery Tabelsorter，它运行良好。

但我希望在每个字段中都有一个输入标签，其中排序脚本的值位于输入值参数内。

现在： <td><?php echo $value; ?></td>

目标： <td><input value="<?php echo $value; ?>"></td>

如何告诉 jQuery Tablesorter 新的“值”位置？

在 Tablesorter 2.0 示例中找到 http://tablesorter.com/docs/example-option-text-extraction.html

例子：

textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].childNodes[0].innerHTML; 
}

我的尝试但不起作用：

textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].val();
}

【问题讨论】：

标签： javascript jquery tablesorter

【解决方案1】：

使用 kendoui 代替表格排序器。它提供更多功能且易于使用 kendoui

【讨论】：

这是一个不错的选择，但既然有同样好的免费产品，为什么还要提出要花很多钱的东西呢？

【解决方案2】：

原来的 tablesorter 插件在使用 updateCell 方法时存在问题，因此在更新输入值时此方法将不起作用。但是你可以试试我的fork of tablesorter 没有这个问题。

Here is a demo 以下所有代码放在一起。

基本上不需要使用适用于所有表格单元格的textExtraction，您只需要添加一个解析器：

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

然后告诉 tablesorter 将它应用到哪一列（从零开始的索引）：

$('table').tablesorter({
    headers: {
        0: { sorter: "inputs" } // zero-based index (first column = column 0)
    }
});

然后确保对输入的任何更改（除非您将它们设为只读）都可以被 tablesorter 识别并发送到您的服务器

var resort = true, // resort table after update

// update all input types within 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 () {
    // this flag prevents the updateCell event from being spammed
    // it happens when you modify input text and hit enter
    var alreadyUpdating = false;
    $('table').find('tbody').on('change', 'input', function (e) {
        if (!alreadyUpdating) {
            var $tar = $(e.target),
                $table = $tar.closest('table');
            alreadyUpdating = true;
            $table.trigger('updateCell', [ $tar.closest('td'), resort ]);

            // *** update your server here ***

            setTimeout(function () {
                alreadyUpdating = false;
            }, 10);
        }
    });
});

【讨论】：