Jquery Tablesorter - Wont Sort Correctly If New Text Is Typed In

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 s then try sort the column again then it sorts

Solution 1:

Mottie's answer worked for me -- thanks! I didn't like adding a class for the sake of preventing duplicate binds, so I moved the logic outside:

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

Solution 2:

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.

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