jQuery可排序按钮单击时将行移到顶部

Question

I'm using jQuery Sortable to drag and drop reorder table rows successfully. I'm also trying to add a move to top row button on each row. I'm able to get the row to move to top, but the jQuery sortable that creates a serialized array order for POST does not get updated when the row is moved. Here is what I have:

HTML

<table>
 <thead>
  <tr>
   <th>&nbsp</th>
   <th>Id</th>
   <th>Name</th>
  </tr>
 </thead>
 <tbody id="order">
  <tr class='position' id='{$record['IapId']}-{$order}'>
   <td><a id='move-to-top' href='#' class='btn btn-info btn-xs' role='button'><i class='icon-arrow-up'></i></a></td>
   <td>21</td>
   <td>Red Car</td>
  </tr>
 </tbody>
</table>

jQUERY

<script type="text/javascript">
$(document).ready(function(){

  $('tbody#order').sortable({
    axis: 'y',
    stop: function (event, ui) {
      var data = $(this).sortable('serialize');
        $('#output').val(data);
      }
  });

  $('a#move-to-top').click(function() {
    row = $(this).closest('tr');
    $(this).closest('tbody#order').prepend(row);
  });   

});
</script> 

SERIALIZED OUTPUT FOR POST

<input type="hidden" name="cars" id="output" />

Suggestions on how to get the TR that is prepended to top of <tbody> to also reflect in the serialized output from jQuery Sortable ?

Answer 1

Try out this..

var data = $(this).sortable('toArray');

Or poke around here for an answer as well: https://api.jqueryui.com/sortable/#method-serialize