Sort Ajax filled table that has input data filled from call

[mcpalmer1328]

so i build tables throughout my system with results for ajax calls but i am never able to sort the editable content so here is an example

 $("#GuideMain").append('<tr><td class="price" id="tableID">'+data.ID[x]+
'</td><td><input type="text12"  id="tableVendorPO" value="'+data.PO[x]+							
'"/></td><td><input type="text12"  id="tableISBN" value="'+data.ISBN[x]+
'"/></td></tr>');

i can sort by the first column tableID because it is a simple td but cannot sort byt the input fields

[Mottie]

Hi @mcpalmer1328!

Please make sure the new content is being appended to the tbody. What I see about would create a new tbody, keeping the row separate from the original.

[mcpalmer1328]

i dont understand--sorry but i am not worried about them inputting data and being able to sort, but want them to be able to sort on the initial load. here is the full js

$("#ViewList").click(function() {
	$('#loading').show();
    $("#GuideMain tbody tr").remove();
	
    $.ajax({
      type: "POST",
      url: "ViewGMData.php",
      dataType: "json"
	
      success: function(data){
        if (data.message) {
          alert ("You Must Pick a Filter");
          $('#loading').hide();
        } else {
          if (data.ID==null) {
            $("#GuideMain").append('<tr><td>No Records Found</td></tr>');
            $('#loading').hide();
          } else {
            //append general data
            for (var x=0;x<data.ID.length;x++) {
              $("#GuideMain").append('<tr><td class="price" id="tableID">'+data.ID[x]+
              '</td><td><input type="text12"  id="tableVendorPO" value="'+data.PO[x]+							
              '"/></td><td><input type="text12"  id="tableISBN" value="'+data.ISBN[x]+
              </td></tr>');
	
        $('#loading').hide();
          }
        }
      $("#GuideMain").trigger("update");	
    }
  }
});

[Mottie]

Then when tablesorter is initialized, include a sortList option to set the initial sort.

[mcpalmer1328]

$("#GuideMain").tablesorter({
	theme: 'blue',
  sortlist:[[0,0],[1,0]],
  widgets: ['resizable', 'stickyHeaders'],
  widgetOptions : {
    // css class name applied to the sticky header
    resizable : true,
  }

is what i tried--i have tried all the widgets and moving things around and nothing works i have been trying for over a year and it is something about the text input fields not sorting if i change <input type="text12" id="tableISBN" value="'+data.ISBN[x]+ to <td id="tableISBN">'+data.ISBN[x]+ it will sort the new column but as soon as i make an input type it does not work--if i can give you anymore information of access to the program to see what is going on i will this has been a huge setback in sorting data

[Mottie]

Please check out one of the demos on the main wiki page - there are some ajax examples. Once you open the demo, modify the code, save and share the new URL with me here. That would make troubleshooting the problem much easier than guessing at the problem.

[mcpalmer1328]

so i found the issue i was setting addParser to input not inputs so it was not working

$.tablesorter.addParser({
    id: 'inputs',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        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'
});

this works perfectly