jquery Tablesorter - sort field by <input value="value">

Question

I want to sort my 4th and 5th field by the information on my INPUT attr VALUE

This is my html:

<table class=tablesorter width="764" border=1 cellpadding=0 cellspacing=0 id="objective3">
    <thead>
    <tr>
      <th bgcolor="#396FAE" class="divtopheader1">Strategy</th>
      <th bgcolor="#396FAE" class="divtopheader1">Objective</th>
      <th bgcolor="#396FAE" class="divtopheader1">Status</th>
      <th bgcolor="#396FAE" class="divtopheader1">Target Date</th>
      <th bgcolor="#396FAE" class="divtopheader1">Target</th>
      <th bgcolor="#396FAE" class="divtopheader1">Actual</th>
      <th bgcolor="#396FAE" class="divtopheader1">Cumulative</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td align="left" valign="top" class="tvertheadersm">Conservation</td>
      <td width="27%" class="tvertheadersm">statutory authority.</td>
      <td width="8%" align="center" valign="middle" class="tbody2">
          <input type=hidden value="1">
           <thewordIMGshouldgohere src="images/1" alt="Objective met" width=30 height=40 />
      </td>
      <td width="11%" align=center class="tbody2">
          <input type=hidden value="092010">September<br>2010</td>
          <td align=center class="tbody2">14 agencies</td>
      <td align=center class="tbody2">14 agencies</td>
      <td align=center class="tbody2">0 agencies</td>
    </tr>

This is my jquery, here I am trying only for the 5th field but is not working:

$(document).ready(function() {
    // add parser through the tablesorter addParser method
    $.tablesorter.addParser({
        // set a unique id
        id: 'input',
        is: function(s) {
            // return false so this parser is not auto detected
            return false;
        },
        format: function(s) {
            // format your data for normalization
            return $("td input",$(s)).attr("value");
        },
        // set type, either numeric or text
        type: 'numeric'
    });

    $("table").tablesorter({
        // pass the headers argument and assing a object
        headers: {
            // assign the secound column (we start counting zero)
            5: {
                sorter:'input'
            }
        }
    });
});

Any help is welcome!!!

Happy Holidays :-)

Néstor

Answer 1

"s" passed to format() function is a string with cell content. You should rewrite your function to look like this

format: function(s) {
    // format your data for normalization
    return $($.trim(s)).val();
}

Update: took a closer look at your code and at a tablesorter.addParser

It looks like format() is called with 3 parameters, 3rd one being the cell it's applied on. Considering this, code can be rewritten like this:

format: function(s, table, cell) {
  return $('input', cell).val();
}

http://jsfiddle.net/RyCWM/1/

Answer 2

If you want to sort the contents of the current input, you should call on the onchange events the INPUT $("table").trigger("update"); A parser must then looks like that:

 $(document).ready(function () {
        $.tablesorter.addParser({
            // add parser through the tablesorter addParser method$.tablesorter.addParser({
            // set a unique id
            id:'input',
            is:function (s) {
                // return false so this parser is not auto detected
                return false;
            },
            format:function (s) {
                // format your data for normalization
                var obj=$($.trim(s));
                var id=obj[0].id;
                var text=$("#"+id)[0].value;
                return text;
            },
            // set type, either numeric or text
            type:'text'
        });

        $("table").tablesorter({
            // pass the headers argument and assing a object
            headers:{
                3:{
                    sorter:'input'
                }
            }
        });
    });