Sorting Tablesorter columns by input value

Question

I am using jQuery Tabelsorter and it's working great.

But I want inside every -field an input-tag where the value for the sorting-script is located inside the input value param.

NOW: <td><?php echo $value; ?></td>

GOAL: <td><input value="<?php echo $value; ?>"></td>

How can I tell jQuery Tablesorter the new "value" location?

Found at Tablesorter 2.0 Samples http://tablesorter.com/docs/example-option-text-extraction.html

Example:

textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].childNodes[0].innerHTML; 
}

My try but not working:

textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].val();
}

Shivam · Accepted Answer · 2013-08-30 11:43:19Z

1

Instead of table sorter use kendoui.its provide more features & easy to use kendoui

answered Aug 30, 2013 at 11:43

Shivam

2,44319 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mottie Over a year ago

That's a nice alternative, but why suggest something that costs a lot of money when there are free products out there just as good?

Mottie · Accepted Answer · 2013-08-31 14:10:19Z

Tthe original tablesorter plugin has an issue using the updateCell method, so this method will not work when updating input values. But you can try my fork of tablesorter which doesn't have this issue.

Here is a demo of the all of the code below put together.

Basically instead of using textExtraction which applies to ALL table cells, you just need to add a parser:

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

then tell tablesorter which column to apply it to (zero-based index):

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

Then make sure any changes to the inputs (unless you make them read-only) are recognized by tablesorter and sent to your server

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

Collectives™ on Stack Overflow

Sorting Tablesorter columns by input value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related