0

Я пытаюсь использовать Angular-ui-sortable для упорядочивания строк в Угловых-Datatables. Переупорядочения не происходит. Однако, если я пытаюсь использовать обычную таблицу, она работает нормально. Если возможно, пожалуйста, помогите мне (любой ввод или направление).ui-sortable с угловыми данными

С нормальным столом он работает - //jsfiddle.net/pmspraju/La4vqb8b/ С угловой DataTable это НЕ - 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); 

Заранее благодарим за входные данные.

ответ

0

Не пробовал, но позвонил.

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

Спасибо за ваш ответ. он был решен. Несоответствие версии плагина. – user3582387

0

Необходимо добавить скрипт пользовательского интерфейса JQuery в свой HTML.

Попробуйте добавить:

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

Ниже этой строки кода:

<script data-require="[email protected]" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
Смежные вопросы