jquery Tablesorter - 如果在< input>中输入新文本，则不能正确排序 [英] jquery Tablesorter - wont sort correctly if new text is typed in <input>

问题描述

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

1) The code below will sort the input boxes as they are when loaded on the page load, but if I try and edit any of the <input>s then try sort the column again then it sorts by the original value and not the new value, can you help fix this?

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

2) If I type new numbers in the <input> then click on the column header to sort then my inputs blur event will not fire, why and do you know how to fix this?

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

   });

});

推荐答案

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

The parser is only going to grab the input values on initialization. You'll need to update them whenever an input value changes. That being said, I've always had bad luck using blur on inputs, I think it is better to use keyup to check for changes.

无论如何，我有演示。它应该与tablesorter的原始版本一起使用，但度假选项将不可用。否则，我知道它适用于我的 fork of tablesorter 。

Anyway, I've got a demo of a dynamic input parser here. It "should" work with the original version of tablesorter, but the resort option won't be available. Otherwise, I know it works with my 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 - 如果在&lt; input&gt;中输入新文本，则不能正确排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！