Question

I have a table:

<table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

An array that tells where every row should come [{index: 2},{index: 1},{index: 0}] (first row is the last from the array, second row is the 1 in array and third row 0 from the array).

Answer 1

Here is my approach.

// create a new temporary tbody outside the DOM (similar to jQuery's detach)
var tbody_tmp   = document.createElement('tbody');

// itterate through the array in the order of a new table
for(var i = 0, j = data.length; i < j; i++)
{
    // make a copy of current row (otherwise, append child removes the row from the rows array and messes up the index-finder; there got be a better way for this)
    var row     = rows[data[i].index].cloneNode(true);

    tbody_tmp.appendChild(row);

    // reset the index to reflect the new table order (optional, outside the sample)
    data[i].index   = i;
}

// Note that tbody is a jquery object
tbody.parent()[0].replaceChild(tbody_tmp, tbody[0]);

Though, the cloning approach is slow. With 10,000+ records it takes ~1200ms. Furthermore, a jQuery-less approach is preferable.

Posting this in case someone else might find it simple enough for their needs (with less than 1,000 rows).

---

After hours of restless thinking, I’ve ended up with the following. If this sample isn’t enough, I’ve written a whole blog post explaining the logic behind it, http://anuary.com/57/sorting-large-tables-with-javascript.

// Will use this to re-attach the tbody object.
var table       = tbody.parent();

// Detach the tbody to prevent unnecessary overhead related
// to the browser environment.
var tbody       = tbody.detach();

// Convert NodeList into an array.
rows            = Array.prototype.slice.call(rows, 0);

var last_row    = rows[data[data.length-1].index];

// Knowing the last element in the table, move all the elements behind it
// in the order they appear in the data map
for(var i = 0, j = data.length-1; i < j; i++)
{
    tbody[0].insertBefore(rows[data[i].index], last_row);

    // Restore the index.
    data[i].index   = i;
}

// Restore the index.
data[data.length-1].index   = data.length-1;

table.append(tbody);