Does anyone know a way to re-order table columns, using jQuery?
I don\'t mean sort - I mean dynamically move entire columns left or right in a table.
I\'m aware
The idea is to walk over all rows (tr's) of the table and swap the desired td's. Let's swap column 2 and column 4:
$('table tr').each(function() {
var tr = $(this);
var td1 = tr.find('td:eq(1)'); // indices are zero-based here
var td2 = tr.find('td:eq(3)');
td1.detach().insertAfter(td2);
});
I hope this helps.
I combined it with jQueryUI to get some great drag and drop action:
(function() {
var local = {};
local.containment = 'parent';
local.revert = true;
$('body thead th').draggable(local);
$('body thead th').droppable({
drop: dropZone
});
function dropZone(myEvent, myUI ) {
var head = {};
head.dragIndex = myUI.draggable.index();
head.dropIndex = $(this).index();
head.rows = $(this).closest('thead').find('tr');
head.cellIndex = head.rows.find('th').length-1;
head.rows.each(processTableHeaderRows);
function processTableHeaderRows(index, element) {
var row = {}
row.tr = $(element);
row.drag = row.tr.find('th:eq(' + head.dragIndex + ')');
row.drop = row.tr.find('th:eq(' + head.dropIndex + ')');
if (head.dropIndex === head.cellIndex) {
row.drag.detach().insertAfter(row.drop);
} else {
row.drag.detach().insertBefore(row.drop);
}
}
// Same thing here for td instead of th
$(this).closest('table').find('tbody > tr').each(processRows);
function processRows(index, element) {
var row = {};
row.tr = $(element);
row.drag = row.tr.find('td:eq(' + head.dragIndex + ')');
row.drop = row.tr.find('td:eq(' + head.dropIndex + ')');
if (head.dropIndex === head.cellIndex) {
row.drag.detach().insertAfter(row.drop);
} else {
row.drag.detach().insertBefore(row.drop);
}
}
}
})();
Tried to get it to work in jsFiddle, but I couldn't. Works on my website though!
Reading through the source code of the dragtable plugin, the author mentions that the algorithm for actually moving table columns was born of a discussion on the comp.lang.javascript newsgroup. That discussion is here: Swapping table columns.
In that thread, the OP is not asking about the UI side of reordering, but help with debugging a function he'd already written to swap two columns. Further down the discussion it develops into code that enables you to pass a specific column ordering, and have the code calculate all the necessary swaps/moves to get from the current ordering to the specified ordering.
It's not jQuery (most posters on c.l.js have a firm dislike of it and most other JS frameworks), and therefore it's code you can hopefully adapt for your needs and then include anywhere.
This code should work for you.
$("table tr").each(function () {
$(this).find("td").eq(1).after($(this).find("td").eq(0));
});
$("table tr").each(function () {
var rows = $(this).find("td");
rows.eq(1).after(rows.eq(0));
});