Jquery ui sortable table row with specific static column

Question

I have a problem with jquery sortable on table. My table goes like this:

<table>
 <thead>
   <th>Number</th>
   <th>Text</th>
   <th>Order</th>
 </thead>
 <tbody id="sortable" data-bind="foreach: fruits">
  <tr class="ui-state-default">
   <td data-bind="text: number"></td>
   <td data-bind="text: fruit"></td>
   <td data-bind="text: order"></td>
  <tr>

And I want this to make sortable, except on the order column, and I have this code, but it's not working

$( function() {
$( "#sortable" ).sortable({
    items: 'td:not(:nth-child(3))' }
});

For example if I have

Number	Fruit	Order
1	Banana	5
2	Apple	10
3	Peach	15

When I change it, drag the whole row, I want to look like this, the order to remain the same:

Number	Fruit	Order
2	Apple	5
1	Banana	10
3	Peach	15

There is not going to be a good way to do this since you are sorting the Row not the Cells. The row, containing all the cells, will be moved. You could put two Tables side by side and then just Sort the first table. — Twisty
– Twisty, Commented May 21, 2024 at 23:18

Twisty · Accepted Answer · 2024-05-21 23:44:34Z

Consider an alternative method.

$(function() {
  $("#sortable").sortable();
});

.sidebyside {
  float: left;
  margin: 0;
  margin-right: -1px;
  padding: 0;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<div style="width: 400px;">
  <table class="sidebyside" style="width: 66%;">
    <thead>
      <th>Number</th>
      <th>Text</th>
    </thead>
    <tbody id="sortable" data-bind="foreach: fruits">
      <tr class="ui-state-default">
        <td data-bind="text: number">1</td>
        <td data-bind="text: fruit">Banana</td>
      </tr>
      <tr class="ui-state-default">
        <td data-bind="text: number">2</td>
        <td data-bind="text: fruit">Apple</td>
      </tr>
      <tr class="ui-state-default">
        <td data-bind="text: number">3</td>
        <td data-bind="text: fruit">peach</td>
      </tr>
    </tbody>
  </table>
  <table class="sidebyside" style="width: 33%;">
    <thead>
      <th>Order</th>
    </thead>
    <tbody data-bind="foreach: fruits">
      <tr class="ui-state-default">
        <td data-bind="text: order">5</td>
      </tr>
      <tr class="ui-state-default">
        <td data-bind="text: order">10</td>
      </tr>
      <tr class="ui-state-default">
        <td data-bind="text: order">10</td>
      </tr>
    </tbody>
  </table>
  <table>
</div>

It will be a bit more work to populate the tables, yet it does achieve what you set out to do.

Collectives™ on Stack Overflow

Jquery ui sortable table row with specific static column

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related