I am trying to use jQuery DataTables (/) with the Row Ordering plugin (). Originally, the re-ordering of rows looked like it worked, however there was a javascript error "Error: Syntax error, unrecognized expression: #". So I implemented the solution outlined here: Giving the tr elements unique ids. Now there are no javascript errors. However, the row re-ordering doesn't work at all now. I drag a row, but when I drop it, the table just reverts back to its previous state.
Here's the full HTML file with javascript:
Has anyone else encountered this problem? If so, how have you solved it?
I tried digging around in the row reordering javascript and it looks like the problem is grabbing the current and previous position of the row:
// fyi: properties.iIndexColumn is 0
var iCurrentPosition = oTable.fnGetData(tr, properties.iIndexColumn);
//...
oTable.fnGetData(trPrevious[0], properties.iIndexColumn);
Whatever it's expecting to get from fnGetData has changed. I've iterated over what oTable.fnGetData(tr, i) returns for a couple of values of i and it seems to be the cells of the row.
My guess is the implementation of DataTables has changed since this plugin was written. I'm just wondering if it's possoble to fix this easily or not.
I am trying to use jQuery DataTables (http://datatables/) with the Row Ordering plugin (http://code.google./p/jquery-datatables-row-reordering/wiki/Index). Originally, the re-ordering of rows looked like it worked, however there was a javascript error "Error: Syntax error, unrecognized expression: #". So I implemented the solution outlined here: http://datatables/forums/discussion/19011/drag-and-drop-row-reordering-issue Giving the tr elements unique ids. Now there are no javascript errors. However, the row re-ordering doesn't work at all now. I drag a row, but when I drop it, the table just reverts back to its previous state.
Here's the full HTML file with javascript: http://pastebin./2P9hJ7n2
Has anyone else encountered this problem? If so, how have you solved it?
I tried digging around in the row reordering javascript and it looks like the problem is grabbing the current and previous position of the row:
// fyi: properties.iIndexColumn is 0
var iCurrentPosition = oTable.fnGetData(tr, properties.iIndexColumn);
//...
oTable.fnGetData(trPrevious[0], properties.iIndexColumn);
Whatever it's expecting to get from fnGetData has changed. I've iterated over what oTable.fnGetData(tr, i) returns for a couple of values of i and it seems to be the cells of the row.
My guess is the implementation of DataTables has changed since this plugin was written. I'm just wondering if it's possoble to fix this easily or not.
Share Improve this question edited May 11, 2015 at 18:42 marsh 1,4411 gold badge13 silver badges19 bronze badges asked May 11, 2015 at 18:32 CreatureCreature 1,0542 gold badges14 silver badges29 bronze badges 03 Answers
Reset to default 10To prevent revert back after drop use "update: false" attribute.
var table = $('#categories').DataTable( {
"ajax": "someurl",
"rowReorder": {
selector: 'tr',
update: false,
},
});
As you can read in the wiki-link you provided,
- Each TR element must have id attribute.
- One column in the table should be indexing column. This column will be used for determining position of the row in the table. By default this is first column in the table. You can see structure of the table on the live example page.
The "unrecognized expression: #" was related to the first demand; that you are not able to move the rows around is related to the second. You simply lack an indexing column. As you have figured out with the missing <tr> #id, you can easily create that column programmatically :
$("#mySuperTable thead tr").prepend('<th>#</td>');
var count = $("#mySuperTable tbody tr").length-1;
$("#mySuperTable tbody tr").each(function(i, tr) {
$(tr).attr('id', 'id'+i);
$(tr).prepend('<td>'+parseInt(i+1)+'</td>');
if (i==count) {
$("#mySuperTable").dataTable({
//...initialization options
}).rowReordering();
}
});
Now RowReordering works with your table -> http://jsfiddle/gy8s3hoa/
Notice the demo above are running dataTables 1.10.x. The issue has nothing to do with dataTables versions or some changes in dataTables internals, it is simply about how the RowReordering plugin is created. It is not very elegant, if you ask me. The plugin should create the id's and the index column it is needing (and make it hidden) by itself.
There were two elements to my fix. First I needed an incremental number representing the order. In my case I had this as the first column. Don't use id because the plugin will modify your data to re-number this value, which could be a problem if you want to update a database to save the order.
Secondly I defined the rowReorder property as an object, and within that I added a dataSrc property with the name of the data property that provides the order.
const table = $('#my-table').dataTable({
ajax: 'some-url',
rowReorder: {
selector: 'tr',
dataSrc: 'order'
},
columns: [
{ data: 'order' },
{ data: 'description' },
]
});
Now the reorder will stick, and you can get the data in the current order if you want to update your data source
table.api().rows({order: 'current'}).data().toArray()