Question

1）下面的代码会在加载到页面加载时对输入框进行排序，但是如果我尝试编辑<input>中的任何一个，那么请尝试再次对列进行排序然后按原始排序值而不是新值，你可以帮忙解决这个问题吗？

2）如果我在<input>中键入新号码，然后点击列标题进行排序，那么我的输入模糊事件将不会触发，为什么以及您知道如何解决此问题？

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>Amounts</th> 

</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith1</td> 
    <td><input type="text" value="1"/></td> 
</tr> 
<tr> 
    <td>Smith2</td> 
    <td><input type="text" value="2"/></td> 
</tr> 
<tr> 
    <td>Smith3</td> 
    <td><input type="text" value="3"/></td> 
</tr> 
<tr> 
    <td>Smith4</td> 
    <td><input type="text" value="4"/></td> 
</tr> 
</tbody> 
</table>

$(document).ready(function() {

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

    $("#myTable").tablesorter({

        headers: {
            1: {
                sorter:'input'
            }
        }
    });


   $('input').blur(function(){

        alert($(this).val());

   });

});

Answer 1

Mottie的回答对我有用 - 谢谢！我不喜欢为了防止重复绑定而添加一个类，所以我将逻辑移到了外面：

$("#mytable tbody").on("keyup", "input", function(event){
    var table = $(this).closest("table");
    var cellElement = $(this).closest("td")[0];
    table.trigger("updateCell", [cellElement, false]);
});

Answer 2

解析器只会在初始化时获取输入值。每当输入值发生变化时，您都需要更新它们。话虽如此，我在使用blur输入时总是运气不好，我认为最好使用keyup来检查更改。

无论如何，我在这里有a demo动态输入解析器。它“应该”与tablesorter的原始版本一起使用，但度假选项将不可用。否则，我知道它适用于我的fork of tablesorter。

// add parser that dynamically updates input values
$.tablesorter.addParser({
    id: 'inputs',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell) {
        var $c = $(cell);
        // return 1 for true, 2 for false, so true sorts before false
        if (!$c.hasClass('updateInput')) {
            $c
            .addClass('updateInput')
            .bind('keyup', function() {
                $(table).trigger('updateCell', [cell, false]); // false to prevent resort
            });
        }
        return $c.find('input').val();
    },
    type: 'text'
});

$(function() {
    $('table').tablesorter({
        widgets: ['zebra'],
        headers: {
            3: {
                sorter: 'inputs'
            }
        }
    });
});

jquery Tablesorter - 如果在<input />中键入新文本，则不能正确排序

2 个答案: