table sorting - I want to move Child rows along with parent while sorting the parent row

Question

Question is : I want to move Child rows along with parent while I sort the parent row. I am using this js for sorting my table data. my html is like

<table>
    <tr class="parent">
        <th id="apple">Apple</th>
        <th id="orange">Orange</th>
        <th>Banana</th>
    </tr>
    <tr class="parent">
        <td>Apple</td>
        <td>Orange</td>
        <td>Banana</td>
    </tr>
    <tr class="child">
        <td>Apple 1</td>
        <td>Orange 1</td>
        <td>Banana 1</td>
    </tr>
    <tr class="child">
        <td>Apple 2</td>
        <td>Orange 2</td>
        <td>Banana 2</td>
    </tr>
    <tr class="parent">
        <td>Table</td>
        <td>cHAIR</td>
        <td>Mouse</td>
    </tr>
    <tr class="child">
        <td>Table 1</td>
        <td>cHAIR 1</td>
        <td>Mouse 1</td>
    </tr>
    <tr class="child">
        <td>Table 2</td>
        <td>cHAIR 2</td>
        <td>Mouse 2</td>
    </tr>
</table>  

js is like this:

jQuery.fn.sortElements = (function(){

        var sort = [].sort;

        return function(comparator, getSortable) {

            getSortable = getSortable || function(){return this;};

            var placements = this.map(function(){

                var sortElement = getSortable.call(this),
                    parentNode = sortElement.parentNode,

                    // Since the element itself will change position, we have
                    // to have some way of storing its original position in
                    // the DOM. The easiest way is to have a 'flag' node:
                    nextSibling = parentNode.insertBefore(
                        document.createTextNode(''),
                        sortElement.nextSibling
                    );

                return function() {

                    if (parentNode === this) {
                        throw new Error(
                            "You can't sort elements if any one is a descendant of another."
                        );
                    }

                    // Insert before flag:
                    parentNode.insertBefore(this, nextSibling);
                    // Remove flag:
                    parentNode.removeChild(nextSibling);

                };

            });

            return sort.call(this, comparator).each(function(i){
                placements[i].call(getSortable.call(this));
            });

        };

    })();

Adding another JS:

$('#apple, #orange')
      .each(function(){
          var th = $(this),
              thIndex = th.index(),
              inverse = false;

          th.click(function() {

              // sorting classes don't work here b/c this function gets called repeatedly - moved to afterRequest: function

              table.find('tr.parent td').filter(function(){

                  return $(this).index() === thIndex;

              }).sortElements(function(a, b){
                      return $.text([a]) > $.text([b]) ?
                          inverse ? -1 : 1
                          : inverse ? 1 : -1;

                  }, function(){
                      // parentNode is the element we want to move

                      return this.parentNode;

                    //  this.parentNode
                  });
              inverse = !inverse;


          });

      });

Answer 1

Assume your sortElements work correctly.Create a association before you sort,and append behind the parent after sort:

//the sort logic
//add association before sort
$(".parent").each(function(i,node){
    var child=$(this).nextUntil('.parent');
    $(this).data("child-node",child); 
//sort  
}).sortElements(function(a,b){
     var lengthb= $(b).children("td").first().text().length 
     var lengtha= $(a).children("td").first().text().length
     return lengthb-lengtha;
//append child
}).each(function(i,node){
     var child=$(this).data("child-node");
     $(this).after(child);
});

check code http://jsfiddle.net/zHbDm/

Answer 2

I'm not sure if I understand your question correctly.

This can be used to select all of the next rows that are children.

$(".parent").nextUntil($("tr").not(".child"))

You can also include the parent in the selector by adding .addBack()

$(".parent").nextUntil($("tr").not(".child")).addBack()

Answer 3

Since you are already building on to jQuery, I would suggest you look into DataTables jQuery plugin since they already do much of this type of work for you. You just have to do configuration.