Question

我对数据表进行排序时遇到了一些问题。我对我的api进行了查询，我的数据很好，但是当我对界面进行排序时，数据就会消失。一个想法？

JS

myApp.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('http://dev:5001/api/1/phones').
    success(function(data, status) {
        $scope.phones= data;
    });
}]);

HTML

<div ng-app="myApp">
<div ng-controller="MainCtrl">
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Id</th>
                <th>IP_ADDRESS</th>
                <th>MAC_ADDRESS</th>
                <th>STATUS</th>
                <th>VERSION</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='phone in phones'>
                <td> {{ phone.id }} </td>
                <td> {{ phone.ip_address }} </td>
                <td> {{ phone.mac_address }} </td>
                <td> {{ phone.status }} </td>
                <td> {{ phone.version }} </td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        $(document).ready(function() {
                    $('#example').DataTable({
                        "bPaginate": true, 
                        "bLengthChange": false,
                        "bFilter": false,
                        "bInfo": false,
                        "bAutoWidth": true});
                    });
    </script>
</div>

Answer 1

一个想法？

是。 angular和jQuery dataTables都想操纵DOM。两个文件加载后都会立即执行操作= = ng-repeat在代码到达$(document).ready(function() {时尚未完成，事实上它甚至可能都没有启动。因此，如果您坚持使用没有指令的纯jQuery dataTable，则必须将$('#example').DataTable()推送到后面的摘要，其中ng-repeat处理已完成。

只需使用$timeout代替无用的ready()链：

$timeout(function() {
   $('#example').DataTable({
     "bPaginate": true, 
     "bLengthChange": false,
     "bFilter": false,
     "bInfo": false,
     "bAutoWidth": true
   })
})

Answer 2

我知道这篇文章已经很老了但是我在指令属性 datatable 中使用 ng 这个值得到了问题的解决方案这样：

<table 
     datatable="ng" 
     class="table table-bordered table-striped table-hover" 
     dt-options="controller.options">
</table>

我跳起来有帮助。

angular：排序数据表后丢失的数据

2 个答案: