Question

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

但是我想在每个-field里面输入一个输入标签，其中排序脚本的值位于输入值param中。

现在： <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();
}

Answer 1

使用kendoui.its代替表格分类器提供更多功能＆amp;使用方便 kendoui

Answer 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);
        }
    });
});

告诉jQuery Tablesorter值所在的位置

2 个答案: