Sorting Records by ID?

JavaScript
1

Hi guys,

I’ve created this sortable records,
http://myonlinesmallgroup.com/warren/ztest/sortable/

As you can see it is on ascending order.
Let’s assume I fetch the data records from the database and that is the result.
Now what I want to do is when I move the record number five above number one record.
It’s ID will turn into ID: 1 and record number 1 will now be ID: 2 and so on in ascending order.

How to do this?

Thanks in advance.

2

Hi there,

If you make your table markup a little more semantic, you can do something like this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Table drag drop example</title>
  </head>
  
  <body>
    <table id="table-1" cellspacing="0" cellpadding="2" border="1">
      <thead>
        <th>ID</th>
        <th>Name</th>
      </thead>
      <tbody>
        <tr><td>1</td><td>One</td></tr>
        <tr><td>2</td><td>Two</td></tr>
        <tr><td>3</td><td>Three</td></tr>
        <tr><td>4</td><td>Four</td></tr>
        <tr><td>5</td><td>Five</td></tr>
        <tr><td>6</td><td>Six</td></tr>
      </tbody>
    </table>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://myonlinesmallgroup.com/warren/ztest/sortable/tablednd.js"></script>
    
    <script>
      function reassignIds(){
        var length = 1;

        $('#table-1 > tbody tr').each(function() {
          $(this).children(":first").text(length);
          length++;
        })
      }

      $("#table-1").tableDnD({
        onDrop: reassignIds
      });
    </script>
  </body>
</html>

There is some documentation included with the plugin.

 * Configuration options:
 * 
 * onDrop
 *     Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
 *     and the row that was dropped. You can work out the new order of the rows by using
 *     table.rows.

This means that you can also do something like this:

onDrop: function(table, row){
  console.log(table, row);
}

which could be the better option depending on the size of the table you are dealing with.

HTH

3

@Pullo ;

Thanks man.