Sort table - I want to move the child rows with the parent when sorting the parent row

Question

Question: I want to move the child rows with the parent while I sort the parent row. I use this js to sort 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 as follows:

 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

Suppose your sortElements is working correctly. Create an association before sorting and add after the parent after sorting:

 //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 the code http://jsfiddle.net/zHbDm/

Answer 2

I am not sure if I understood your question correctly.

This can be used to select all of the following 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 jQuery, I suggest you look into the jQuery plugin in DataTables , as they already do most of this type of work for you. You just need to do the setup.