To start, RowReorder extension has an issue in the process of reorder. Actually I have 2 issues, 1 is connected to row reorder the other one is with keeping attributes on row. I'll explain.
When you reorder, it does move rows around and change the number of row, but the actual index is not changed.
I have a function that when I click on a button in row, the row between gets added, I use a for loop that gets the index of element where I clicked, adds a row to the datatable and starts moving it around to desired position:
[0][1][2][3][4->][<-newRow]
[0][1][2][3->][<-newRow][4]
[0][1][2->][<-newRow][3][4]
insertedRow = table.row(rowCount).node(),
insertedRowData = table.row(insertedRow).data(),
tempRow,
rowCount = table.data().length-1
tempRowData;
//move added row to desired index
for (var i=rowCount;i>index+1;i--) {
tempRow = table.row(i-1).node();
tempRowData = table.row(tempRow).data();
table.row(i).data(tempRowData);
table.cell(i,0).data(i+1);
table.row(i-1).data(insertedRowData);
}
To add a row between I need to get the index of a row on which I clicked, I get it by using:
index = table.row(el).index();
So let's say I have 4 rows, I drag the last one to second position and when I click on it, to add a row between it will actually add a row to the 5th position, because when row reorder is over the index is still 4 even tho in html it will say 2.
To fix that I turned off the update in rowReorder
rowReorder: {
snapX: 7,
update: false
},
And on row-reorder event I added
for (var i=diff.length - 1; i>=0; i--) {
diff[i].nodeData = table.row(diff[i].node).data();
}
for (var i = table.data().length-1; i >= 0; i--) {
for (var j = diff.length - 1; j >= 0; j--) {
if(i === diff[j].newPosition) {
table.row(i).data(diff[j].nodeData);
table.cell(i,0).data(diff[j].newData);
i--;
}
}
}
Which is pretty similar to my row between loop. It works nicely, but the thing is, that I have different html attributes on row and I need to move them along, but since all those functions affect only the inner data, I can't achieve this.
I wrote a copyAttribute function for my rowReorder and rowBetween:
$.fn.copyAllAttributes = function (sourceElement, erase, copyClass, ignoreAttr) {
erase = erase || false;
copyClass = copyClass || false;
ignoreAttr = ignoreAttr || '';
// 'that' contains a pointer to the destination element
var that = this;
// Place holder for all attributes
var allAttributes = $(sourceElement).prop("attributes"),
attrString = '';
if (allAttributes && that.length == 1) {
$.each(allAttributes, function () {
// Ensure that class names are not copied but rather added
if(this.name == "class"){
copyClass ? that.addClass(this.value) : 0;
} else if (ignoreAttr.indexOf(this.name) == -1){
that.attr(this.name, this.value);
attrString += ' ';
attrString += this.name;
}
});
erase ? $(sourceElement).removeAttr(attrString) :0; // bug
}
return that;
};
But they are preserved only until datatable has to manipulate the html again, as soon as it happens everything is like cache reverted or changed...
Any advice how can I keep my attributes and move them along? This is what I'm interested in the most, rowReorder itself can be left the way it is.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent