代码之家 › 专栏 › 技术社区 › Mike

按输入值对Tablesorter列进行排序

tablesorter jquery javascript

Mike · 技术社区 · 11 年前

我正在使用jQuery Tabelsorter,它运行得很好。

但我希望在每个字段中都有一个输入标记,其中排序脚本的值位于输入值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();
}

2 回复 | 直到 4 年前

Shivam 11 年前

使用kendoui而不是台式分拣机。它提供了更多的功能&易于使用 kendoui

Mottie 11 年前

T原始的表分类器插件在使用 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"
});

然后告诉表分类器将其应用于哪一列(从零开始的索引):

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

然后确保输入的任何更改(除非您将其设为只读)都能被表分类器识别并发送到您的服务器

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