Jquery ui sortable on specified table column

Question

i am using the HTML Table with some data being dynamically added to the table. There are two columns in the table id & title. I am using jQuery UI sortable to sort the table rows. The HTML and JS are as below:

<table class="table table-striped table-bordered" id="questions-list-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>                    
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 1 </td>
                    <td>Title 1</td>
                </tr>
                <tr>
                    <td> 2 </td>
                    <td> Title 2</td>
                </tr>               
            </tbody>
        </table>

            <script>

    $(document).ready(function() {

        $("#questions-list-table tbody").sortable({
            disableSelection: true,
            placeholder: "ui-state-highlight",
            axis:"y",
            stop: function(e) {
                console.log("Sorting started");
            }

        });
    });
</script>

Currently whole row is getting sorted. I want that only title to be sortable, the id column should remain in its original place. How can i do that?

Answer 1

If you really just want to sort just one column then the only option is two use two tables as @vijay kani said.

First table will contain only ID column and the Second will contain the Title column. Then you can use css to give it the look of just one table. After that just make the second table sortable.

Here is an example

$("#questions-title-table tbody").sortable({
  disableSelection: true,
  axis: "y"
});

#questions-id-table {
  float: left;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<table id="questions-id-table">
  <thead>
    <tr>
      <th>ID</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
  </tbody>
</table>
<table id="questions-title-table">
  <thead>
    <tr>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
    </tr>
    <tr>
      <td>Title 2</td>
    </tr>
  </tbody>
</table>

Also an fiddle

Answer 2

You want to sort one only column at a time.

so you didn't need to match the corresponding value of the individual rows.

If this is your case(this is not Bootstrap Case), Try to implement as two individual table with one column

I hope it helps

Answer 3

If the id column is a sequential number starting with 1 then, one possible solution is t

$(document).ready(function() {

  var start;
  $("#questions-list-table tbody").sortable({
    disableSelection: true,
    placeholder: "ui-state-highlight",
    axis: "y",
    start: function(e, ui) {
      start = ui.item.index();
    },
    stop: function(e, ui) {
      var end = ui.item.index();

      var from = start <= end ? start : end,
        to = start <= end ? end + 1 : start + 1;
      $("#questions-list-table tbody > tr").slice(from, to).find('td:first').text(function(i) {
        return from + i + 1;
      })
    }
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<table class="table table-striped table-bordered" id="questions-list-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Title 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Title 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Title 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Title 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Title 5</td>
    </tr>
  </tbody>
</table>