Attempting to move row in DataTable via rows().invalidate()

phlipobm

Hello,

I just started using DataTables a few days ago and I have a few questions. I have two tables (players and selectedPlayers) where I want to move certain rows from players to selectedPlayers. In selectedPlayers, I need the ability to move rows up and down (not implemented yet) in the table (basically ranking your selected players). I have arrow buttons that trigger a javascript function (as seen below and in the linked example) when clicked.

I was looking for a function in DataTables that would move a row up or down within a table but could not find one so I am using a simple jquery "insertBefore" method. I also attempted to look at changing the row indexes but couldn't find a good way to do that either (again, DataTables novice here).

moveUpPlayer = function (upButton) {
              var selectedPlayers = $('#selectedPlayers').DataTable();
              var playerRow = $(upButton).parents("tr");
              var previousRow = playerRow.prev();
              playerRow.insertBefore(playerRow.prev());
              selectedPlayers.rows().invalidate().draw();               
            }

When I use the Chrome debugger I can see the player I select to "move up" actually move when the "insertBefore" line runs. The table reverts back once the selectedPlayers.rows().invalidate().draw() is ran.

Can someone let me know what I'm doing wrong or alternate options?

Here is my example: http://live.datatables.net/dohuxaso/1/edit
Here is my debug code: iwiwuf

Thank you!!!

Brian

phlipobm

Looking into this more, it appears the selectedPlayers DataTable is defaulting its ordering to the first column (which happens to be a hidden id column). I have added a hidden column to hold the position and I will order the table on this new column.

When moving the row, I am modifying the current and previous row's position value. I am doing this by updating aoData._aData. Not sure if there is a better/more correct way of accomplishing these cell updates or not???

Here is the updated logic:

moveUpPlayer = function (upButton) {
                var selectedPlayers = $('#selectedPlayers').DataTable();
                var oTT = TableTools.fnGetInstance('selectedPlayers');
                var playerRow = $(upButton).parents("tr");
                var previousRow = playerRow.prev();
                var playerDraftPos = oTT.fnSettings().dt.aoData[selectedPlayers.row(playerRow).index()]._aData[8];
                var previousDraftPos = oTT.fnSettings().dt.aoData[selectedPlayers.row(previousRow).index()]._aData[8];

                playerRow.insertBefore(playerRow.prev());
                oTT.fnSettings().dt.aoData[selectedPlayers.row(playerRow).index()]._aData[8] = previousDraftPos;
                oTT.fnSettings().dt.aoData[selectedPlayers.row(previousRow).index()]._aData[8] = playerDraftPos;
                
                selectedPlayers.rows().invalidate().draw();
            }

phlipobm

So, I am now loading the "selectedPlayers" table based on previous entries and the "moveUpPlayer" logic stopped working. The ordering is still set to the position column and I can add new players to this table from the "players" table yet on the invalidate().draw() call, it reverts back to the original order.

The only change I noticed is that the Position column value now reads "1" instead of 1. Why would it matter if its a string or number?

Any thoughts?