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?

Arun P Johny · Accepted Answer · 2015-07-29 06:00:53Z

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>

vijay kani · Accepted Answer · 2015-07-29 06:10:10Z

0

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

answered Jul 29, 2015 at 6:10

vijay kani

1408 bronze badges

1 Comment

imran Over a year ago

Thanks...but your solution is not viable,as i had stated earlier,the content is dynamic in my table. so the height of table cell can vary. So it would be very difficult to maintain the concurrency of id and title...Hope you understood my reason...

Ashraf Purno · Accepted Answer · 2015-07-29 06:32:48Z

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

Collectives™ on Stack Overflow

Jquery ui sortable on specified table column

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related