CODEWITHSUNDEEP
datatables-1.10angular-datatablesangular-ui-sortable
user3582387
user3582387

Reputation: 41

ui-sortable with angular datatables

I have been trying to use Angular-ui-sortable to reorder the rows in an Angular-datatables. Reorder is not happening. However, if i try with normal table, it is working fine. If possible please help me out (any input or direction).

With normal table it is working - //jsfiddle.net/pmspraju/La4vqb8b/ With angular-datatable it is NOT - http://jsfiddle.net/pmspraju/4o9fzwqz/

Plunker - http://plnkr.co/edit/XVnaNLuMWQTnYlrGwHdF?p=preview

HTML:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
</head>

<body ng-app="datatablesSampleApp">


  <div ng:controller="controller">
    <label>list: {{list1}}</label>
    <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" style="width:auto;" class="table table-bordered">
      <thead>
        <tr>
          <th>Index</th>
          <th>id</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody ui:sortable ng-model="list">
        <tr ng-repeat="lang in list1" class="item" style="cursor: move;">
          <td>{{$index}}</td>
          <td>{{lang.id}}</td>
          <td>{{lang.value}}</td>
        </tr>
      </tbody>
    </table>
    <hr>
  </div>

  <script data-require="[email protected]" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" data-require="[email protected]" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
  <script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

JavaScript:

(function(angular) {
  'use strict';
  angular.module('datatablesSampleApp', ['datatables','ui']).
  controller('controller', function($scope, DTOptionsBuilder, DTColumnDefBuilder, DTColumnBuilder) {


    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withPaginationType('full_numbers')
      .withDisplayLength(2)
      .withOption('order', [1, 'desc']);

    $scope.dtColumnDefs = [
      DTColumnDefBuilder.newColumnDef(0).notSortable(),
      DTColumnDefBuilder.newColumnDef(1).notSortable(),
      DTColumnDefBuilder.newColumnDef(2).notSortable()
    ];

    $scope.list1 = [{
      "id": "1",
      "value": "angular"
    }, {
      "id": "2",
      "value": "meteor"
    }];
  });
})(angular);

Thanks in advance for your inputs.

Upvotes: 0

Views: 1262

Answers (2)

sanwrit
sanwrit

Reputation: 178

You need to add JQuery UI script in your HTML.

Try adding: 

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Below this line of code:

<script data-require="[email protected]" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Upvotes: 0

JasonP
JasonP

Reputation: 11

Haven't tried it yet but give it a call.

$scope.dtOptions = DTOptionsBuilder.newOptions()
  .withPaginationType('full_numbers')
  .withDisplayLength(2)
  .withOption('order', [1, 'desc'])
  .withOption('rowReordering', true);   // Try to add this in your options

Upvotes: 0

Related Questions