How to move a row up or down in a DataTable?

Question

I am using the JavaScript library DataTables to display data.

I want to be able to reorder the rows. I saw there was an extension called RowReorder but it seems broken as even the examples found online don't reorder rows (at least in latest version of Chrome as of this writing). And even if it worked, I don't like this solution because it is not clear that you can reorder the rows.

So I would like to implement something like the following image:

I found several links online asking for that but it seems nobody could make it work properly.

My data source is a simple array. No ajax yet. I want to start simple.

Is it something you've done before? Any direction on how to start building that feature?

You must do the coding yourself. Here is an example -> http://stackoverflow.com/questions/30712227/datatables-row-add-to-specific-index/30782115#30782115 it is not quite the same, it is inserting a row at a specific position, but you should use same technique for moving rows up or down. — davidkonrad, Dec 15 '16 at 14:17
Thank you! I will take a look and update the question as I get closer to the solution. — Maxime, Dec 15 '16 at 14:22
@davidkonrad I managed to make it work with code inspired from your answered. I did a +1 on that answer to thank you. Problem solved. :-) — Maxime, Dec 15 '16 at 16:41

score 8 · Accepted Answer · edited May 23 '17 at 12:24

Thank you to David Konrad for his guidance from his answer on another question on how to add a row in the middle of a table.

The first thing I did is start by creating an Action column in my table and dynamically add the Up or Down options.

{
    name: 'action',
    data: null,
    title: 'Action',
    searchable: false,
    sortable: false,
    render: function (data, type, full, meta) {
        if (type === 'display') {
            var $span = $('<span></span>');

            if (meta.row > 0) {
                $('<a class="dtMoveUp">Up</a>').appendTo($span);
            }

            $('<a class="dtMoveDown">Down</a>').appendTo($span);

            return $span.html();
        }
        return data;
    }
}

Then, I added code in the drawCallback to remove the Down arrow of the last row and bind the click event to moveUp and moveDown functions:

'drawCallback': function (settings) {
    $('#ArgumentsTable tr:last .dtMoveDown').remove();

    // Remove previous binding before adding it
    $('.dtMoveUp').unbind('click');
    $('.dtMoveDown').unbind('click');

    // Bind click to function
    $('.dtMoveUp').click(moveUp);
    $('.dtMoveDown').click(moveDown);
}

Then I coded the move up/down functions. It is important to note that my data has a order property that I use to change the order. This order is displayed as the first column and makes it the default sort column:

// Move the row up
function moveUp() {
    var tr = $(this).parents('tr');
    moveRow(tr, 'up');
}

// Move the row down
function moveDown() {
    var tr = $(this).parents('tr');
    moveRow(tr, 'down');
}

// Move up or down (depending...)
function moveRow(row, direction) {
    var index = table.row(row).index();

    var order = -1;
    if (direction === 'down') {
      order = 1;
    }

    var data1 = table.row(index).data();
    data1.order += order;

    var data2 = table.row(index + order).data();
    data2.order += -order;

    table.row(index).data(data2);
    table.row(index + order).data(data1);

    table.page(0).draw(false);
}

Note: It is important to understand that when you ask DataTable to draw() your table again, it will use your data to sort the results according to the parameters set in the DataTable definition. This is why I chose, for this example, to set the order as the first column (default sort) and alter my data objects directly (instead of playing with internal information from DataTable). That makes things a lot easier.

Note 2: It is really important that your data is received by the DataTable already sorted by order. Otherwise, this solution won't work as is.

You can check a full working example here:

https://jsfiddle.net/kxfx489y/4/

Fabulous, I have enable paging and added records more than 10. Even then this solution is working. the only thing which should be changed table.page(0).draw(false); to table.draw(false); — Asad Naeem, Aug 09 '22 at 12:20
the following code will show the Up button only on last page not on every page. let pageInfo = $('#ArgumentsTable').DataTable().page.info(); //console.log(pageInfo); if (pageInfo.page + 1 === pageInfo.pages) { $('#ArgumentsTable tr:last .dtMoveDown').remove(); } — Asad Naeem, Aug 10 '22 at 08:27

How to move a row up or down in a DataTable?

1 Answers1