Jquery DataTable引导程序不适用于AngularJs_Jquery_Angularjs_Datatables

Jquery DataTable引导程序不适用于AngularJs

jquery angularjs datatables

Jquery DataTable引导程序不适用于AngularJs,jquery,angularjs,datatables,Jquery,Angularjs,Datatables,我试图将DataTable引导程序与AngularJs结合使用，但DataTable的工作原理就像表中没有数据一样。在下面的代码中，我有两个表。第一个使用AngularJs，第二个只使用普通HTML 我需要做什么才能使第一张桌子像第二张一样工作谢谢大家名称国家 {{x.Name} {{x.Country}}> 渲染引擎浏览器月台引擎版本 CSS等级三叉戟 Internet Explorer 4.0 赢得95分+ 4. X 三叉戟 Internet Explorer 5.0

我试图将DataTable引导程序与AngularJs结合使用，但DataTable的工作原理就像表中没有数据一样。在下面的代码中，我有两个表。第一个使用AngularJs，第二个只使用普通HTML

我需要做什么才能使第一张桌子像第二张一样工作

谢谢大家


名称
国家
{{x.Name}
{{x.Country}}>




渲染引擎
浏览器
月台
引擎版本
CSS等级
三叉戟
Internet Explorer 4.0
赢得95分+
4.
X
三叉戟
Internet Explorer 5.0
赢得95分+
5.
C
三叉戟
Internet Explorer 5.5
赢得95分+
5.5
A.
三叉戟
Internet Explorer 6
赢98+
6.
A.
三叉戟
Internet Explorer 7
赢XP SP2+
7.
A.
三叉戟
AOL浏览器（AOL桌面）
赢XP
6.
A.
壁虎
火狐1.0
Win 98+/OSX.2+
1.7
A.
壁虎
火狐1.5
Win 98+/OSX.2+
1.8
A.
壁虎
火狐2.0
Win 98+/OSX.2+
1.8
A.
壁虎
火狐3.0
Win 2k+/OSX.3+
1.9
A.
壁虎
卡米诺1.0
OSX.2+
1.8
A.
壁虎
卡米诺1.5
OSX.3+
1.8
A.
壁虎
网景7.2
Win 95+/Mac OS 8.6-9.2
1.7
A.
壁虎
网景浏览器8
赢98SE+
1.7
A.
壁虎
Netscape Navigator 9
Win 98+/OSX.2+
1.8
A.
壁虎
Mozilla 1.0
Win 95+/OSX.1+
1.
A.
壁虎
Mozilla 1.1
Win 95+/OSX.1+
1.1
A.
壁虎
Mozilla 1.2
Win 95+/OSX.1+
1.2
A.
壁虎
Mozilla 1.3
Win 95+/OSX.1+
1.3
A.
壁虎
Mozilla 1.4
Win 95+/OSX.1+
1.4
A.
壁虎
Mozilla 1.5
Win 95+/OSX.1+
1.5
A.
壁虎
Mozilla 1.6
Win 95+/OSX.1+
1.6
A.
壁虎
Mozilla 1.7
Win 98+/OSX.1+
1.7
A.
壁虎
Mozilla 1.8
Win 98+/OSX.1+
1.8
A.
壁虎
Seamonkey 1.1
Win 98+/OSX.2+
1.8
A.
壁虎
顿悟2.20
侏儒
1.8
A.
极速
狩猎1.2
OSX.3
125.5
A.
极速
狩猎1.3
OSX.3
312.8
A.
极速
Safari 2.0
OSX.4+
419.3
A.
极速
Safari 3.0
OSX.4+
522.1
A.
极速
OmniWeb 5.5
OSX.4+
420
A.
极速
ipodtouch/iPhone
iPod
420.1
A.
极速
S60
S60
413
A.
急板地
歌剧7.0
Win 95+/OSX.1+
-
A.
急板地
歌剧7.5
Win 95+/OSX.2+
-
A.
急板地
歌剧8.0
Win 95+/OSX.2+
-
A.
急板地
歌剧8.5
Win 95+/OSX.2+
-
A.
急板地
歌剧9.0
Win95+/OSX.3+
-
A.
急板地
歌剧9.2
Win 88+/OSX.3+
-
A.
急板地
歌剧9.5
Win 88+/OSX.3+
-
A.
急板地
Wii的歌剧
Wii
-
A.
急板地
诺基亚N800
N800
-
A.
急板地
任天堂DS浏览器
任天堂
8.5
C/A1
KHTML
Konqurer 3.1
KDE 3.1
3.1
C
KHTML
孔奎罗3.3
KDE 3.3
3.3
A.
KHTML
孔奎罗3.5
KDE 3.5
3.5
A.
塔斯曼
Internet Explorer 4.5
Mac OS 8-9
-
X
塔斯曼
Internet Explorer 5.1
Mac OS 7.6-9
1.
C
塔斯曼
Internet Explorer 5.2
Mac OS 8-X
1.
C
杂项
NetFront 3.1
嵌入式设备
-
C
杂项
NetFront 3.4
嵌入式设备
-
A.
杂项
迪洛0.8
嵌入式设备
-
X
杂项
链接
纯文本
-
X
杂项
猞猁
纯文本
-
X
杂项
IE手机
Windows Mobile 6
-
C
杂项
PSP浏览器
PSP
-
C
其他浏览器
所有其他
-
-
U
渲染引擎
浏览器
月台
引擎版本
CSS等级
var app=angular.module（'testApp'，[]）；
app.controller（'testCtrl'，函数（$scope，$http）
{
$http.get（“http://www.w3schools.com/angular/customers_mysql.php）成功（功能（响应）
{
$scope.names=response.records；}）；
});
$（文档）.ready（函数（）
{
$（“#示例”）.dataTable（）；
$（'#示例2'）。数据表（）；
});

我用下面的代码解决了我的问题。过滤、分页和排序工作正常

下载angular-datatables.min.js文件并将其放入项目中，就像我在


名称
城市
国家
{{name.name}
{{name.City}
{{name.Country}
var app=角度模块（'Angu
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="angular-datatables/dist/angular-datatables.min.js"></script>   
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
    </head>
    <body>
        <div ng-app="AngularWayApp" ng-controller="AngularWayCtrl">
            <table datatable="ng" class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="name in names" ng-click="testingClick(name)">
                        <td>{{name.Name}}</td>
                        <td>{{name.City}}</td>
                        <td>{{name.Country}}</td>
                      </tr>
                </tbody>
            </table>

            <script>
                var app = angular.module('AngularWayApp', ['datatables']);

                app.controller('AngularWayCtrl', function($scope, $http)
                {
                    $http.get("http://www.w3schools.com/angular/customers_mysql.php").success(function (response)
                    {
                        $scope.names = response.records;
                    });

                    $scope.testingClick = function(name)
                    {
                        console.log(name);
                    };
                });
            </script>
        </div>
    </body>
</html>