Valor_ Valor_ - 2 months ago 13
Javascript Question

Make last row NON sortable

I'm have sortable table rows in my angular project, but sorting rows also contains query-ui code elements and now i wan't to make last row NON sortable.

HTML

<div ng:controller="controller">
<table style="width:auto;" class="table table-bordered">
<thead>
<tr>
<th>Index</th>
<th>Count</th>
</tr>
</thead>
<tbody ui:sortable ng:model="list">
<tr ng:repeat="item in list" class="item" style="cursor: move;">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
<tr>
<td>Non Sortable</td>
<td>Non Sortable</td>
</tr>
</tbody>{{list}}
<hr>
</div>


controller

var myapp = angular.module('myapp', ['ui']);

myapp.controller('controller', function ($scope) {
$scope.list = ["one", "two", "thre", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);


Here is working JsFiddle: http://jsfiddle.net/valor_/fc7oftkn/

So how to make last row non sortable? If you need any additional information's please let me know and i will provide. Thank you in advance

Answer

Just move them to the <tfoot> like below.

<table style="width:auto;" class="table table-bordered">
  <thead>
    <tr>
      <th>Index</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody ui:sortable ng:model="list">
    <tr ng:repeat="item in list" class="item" style="cursor: move;">
      <td>{{$index}}</td>
      <td>{{item}}</td>
    </tr>

  </tbody>{{list}}
  <tfoot>
    <tr>
      <td>Non Sortable</td>
      <td>Non Sortable</td>
    </tr>
  </tfoot>
</table>
Comments