angular：排序数据表后丢失数据 [英] angular : lost data after sort datatable

问题描述

对数据表进行排序时，我有一个小问题。我对我的api进行了查询，我得到了很好的数据，但是当我对接口进行排序时，数据消失了。

I have a little problem when I sort a datatable. I made ​​a query to my api , I get my data well , but when I sort the interface, the data disappear. An idea?

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>

推荐答案

一个主意？

An idea?

是的。 angular和jQuery dataTables都希望操纵DOM。加载文档=== < ng-repeat 都将在代码到达 $（document）时完成。 ready（function（）{，实际上它甚至可能没有启动。因此，如果您坚持使用不带指令的纯jQuery dataTables，则必须按下 $（'＃example' ）.DataTable（）放入后来的 digest 中，其中 ng-repeat 处理完成。

Yes. Both angular and jQuery dataTables wants to manipulate the DOM. Both is going to action as soon the document is loaded === ng-repeat is not finished at the time the code reach $(document).ready(function() {, in fact it is propably not even initiated. So if you insist on using pure jQuery dataTables without directives, you must push $('#example').DataTable() into a later digest where the ng-repeat processing is finished.

只需使用 $ timeout 代替无用的 ready（）链：

Simply use a $timeout instead of the useless ready() chain :

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

这篇关于angular：排序数据表后丢失数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！