How to retrieve current datatable rows after a RowReorder ?

egd-flaine

Here is my upload debug : https://debug.datatables.net/uwemel

Hello,

After a reorder event, I want to loop over all rows to get their ID in the first column.
Actually the issue is when I loop over datatable rows, I get them in their intial order, before the Reorder.

The idea is to get all rows with myTable.rows().every() but in this way it still returns rows in the order before RowReorder event...

That's my current code :

          myTable.on('row-reorder', function (e, diff, edit) {
                var categories = [];
                myTable.rows().every(function (rowIdx, tableLoop, rowLoop) {
                   // here 
                    categories.push(this.data().id);
                });
                if (categories.length > 0) {
                    $.ajax({
                        'url': 'myUrl',
                        'method': 'post',
                        'data': {
                            ids: categories
                        }
                    }).done(function (data) {
                        myTable.ajax.reload();
                    });
                }
            });

Thanks a lot.

Fred

colin

Hi @egd-flaine ,

If you use the selector-modifier for rows() like this, it'll do the trick:

myTable.rows({order:'current'}).every(function (rowIdx, tableLoop, rowLoop) {

Cheers,

Colin

DeanMills

Tried all the selector-modifier options, but still printing the original row order

kthorngren

Please don't duplicate questions in other posts.

I see the same behavior. I also tried with the row-reordered event with the same results. My conclusion is that these events happen before Datatables redraws (ordering, searching) the table. Built a test case to show this:
http://live.datatables.net/garizoxa/1/edit

Once the table has drawn then the order is as expected. The example shows using a reorderFlag to keep track of the table being reordered. In the draw event the flag can be checked to determine whether to do something on row reordering.

Maybe a feature request for a post-row-reordered event that occurs after the draw event is needed. How about it @allan or @colin?

Kevin

allan

Great analysis Kevin. Best option is probably to just do:

table.on('row-reordered', function () {
  table.one('draw', function () {
     ...
  });
});

But I agree, it is odd that row-reordered is triggered before the draw is complete.

Allan

kthorngren

Neat, never though about doing that. Here is the updated example restructured like Allan's suggestion.
http://live.datatables.net/garizoxa/4/edit

Kevin

colin

Final tweak here - that inner on() should be an one(), otherwise the callbacks keep expanding.

DeanMills

Thanks for the answer Kevin.

But I have a save button and on the click event, the row order still prints the original order. The draw has already been completed when the user clicks on the button

kthorngren

Maybe you can update the test case or provide one showing what you have. This way we can see exactly what you are doing to provide suggestions. Otherwise we would be guessing.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Koldree

I've tried the one('draw') event - it works well with row.every() function, but doesn't work with

var tableData = table.data().toArray();
console.log(tableData);

Can somebody explain why it is like that?
Thanks in advance

Here is an updated sample: http://live.datatables.net/garizoxa/79/edit

kthorngren

@Koldree The docs for data() state this:

The order of the rows is the row data index (i.e. the order the data was originally read into the table).

Which is what you are seeing in your example.

Kevin

Koldree

Oh, now I understood
thank you!