角度：排序数据表后丢失数据答案

【问题标题】：angular : lost data after sort datatable角度：排序数据表后丢失数据
【发布时间】：2016-12-19 15:46:35
【问题描述】：

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

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>

【问题讨论】：

您的排序代码在哪里？
你在使用角度数据表指令吗？

标签： angularjs datatables

【解决方案1】：

我知道这篇文章已经很老了，但我在指令属性 datatable 中使用 ng 值得到了解决问题的方法，如下所示： p>

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

我希望有帮助。

【讨论】：

【解决方案2】：

一个想法？

是的。 angular 和 jQuery dataTables 都想操作 DOM。加载文档后两者都会立即执行 === ng-repeat 在代码到达 $(document).ready(function() { 时还没有完成，实际上它甚至可能还没有启动。因此，如果您坚持使用不带指令的纯 jQuery 数据表，则必须将 $('#example').DataTable() 推送到稍后的 digest 中，在那里完成 ng-repeat 处理。

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

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

【讨论】：

非常感谢您的回答！

【解决方案3】：

如果您只计划表格排序，则可以使用OrderBy 过滤器

<tbody>
            <tr ng-repeat="phone in phones | orderBy:'id'">
                <td> {{ phone.id }} </td>
                <td> {{ phone.ip_address }} </td>
                <td> {{ phone.mac_address }} </td>
                <td> {{ phone.status }} </td>
                <td> {{ phone.version }} </td>
            </tr>
        </tbody>

【讨论】：