DataTable Bootstrap 无法与 AngularJs 一起使用

Question

我正在尝试将 DataTable Bootstrap 与 AngularJs 一起使用，但 DataTable 的工作方式就像 table 中没有数据一样。在下面的代码中，我有两个 table。第一个使用 AngularJs 而第二个仅使用 HTML.

我需要做什么才能使第一个 table 像第二个一样工作？

谢谢大家！

<!DOCTYPE html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
</head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>

<body>
 <div ng-app="testApp" ng-controller="testCtrl">
  <table id="example" class="table table-bordered table-hover">
   <thead>
    <tr>
     <th>Name</th>
     <th>Country</th>
    </tr>
   </thead>
   <tbody>
    <tr ng-repeat="x in names">
     <td>{{x.Name}}</td>
     <td>{{x.Country}}</td>>
    </tr>
   </tbody>
  </table>

  <br />
  <br />

  <table id="example2" class="table table-bordered table-hover">
   <thead>
    <tr>
     <th>Rendering engine</th>
     <th>Browser</th>
     <th>Platform(s)</th>
     <th>Engine version</th>
     <th>CSS grade</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Trident</td>
     <td>Internet Explorer 4.0</td>
     <td>Win 95+</td>
     <td>4</td>
     <td>X</td>
    </tr>
    <tr>
     <td>Trident</td>
     <td>Internet Explorer 5.0</td>
     <td>Win 95+</td>
     <td>5</td>
     <td>C</td>
    </tr>
    <tr>
     <td>Trident</td>
     <td>Internet Explorer 5.5</td>
     <td>Win 95+</td>
     <td>5.5</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Trident</td>
     <td>Internet Explorer 6</td>
     <td>Win 98+</td>
     <td>6</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Trident</td>
     <td>Internet Explorer 7</td>
     <td>Win XP SP2+</td>
     <td>7</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Trident</td>
     <td>AOL browser (AOL desktop)</td>
     <td>Win XP</td>
     <td>6</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Firefox 1.0</td>
     <td>Win 98+ / OSX.2+</td>
     <td>1.7</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Firefox 1.5</td>
     <td>Win 98+ / OSX.2+</td>
     <td>1.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Firefox 2.0</td>
     <td>Win 98+ / OSX.2+</td>
     <td>1.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Firefox 3.0</td>
     <td>Win 2k+ / OSX.3+</td>
     <td>1.9</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Camino 1.0</td>
     <td>OSX.2+</td>
     <td>1.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Camino 1.5</td>
     <td>OSX.3+</td>
     <td>1.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Netscape 7.2</td>
     <td>Win 95+ / Mac OS 8.6-9.2</td>
     <td>1.7</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Netscape Browser 8</td>
     <td>Win 98SE+</td>
     <td>1.7</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Netscape Navigator 9</td>
     <td>Win 98+ / OSX.2+</td>
     <td>1.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.0</td>
     <td>Win 95+ / OSX.1+</td>
     <td>1</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.1</td>
     <td>Win 95+ / OSX.1+</td>
     <td>1.1</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.2</td>
     <td>Win 95+ / OSX.1+</td>
     <td>1.2</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.3</td>
     <td>Win 95+ / OSX.1+</td>
     <td>1.3</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.4</td>
     <td>Win 95+ / OSX.1+</td>
     <td>1.4</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.5</td>
     <td>Win 95+ / OSX.1+</td>
     <td>1.5</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.6</td>
     <td>Win 95+ / OSX.1+</td>
     <td>1.6</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.7</td>
     <td>Win 98+ / OSX.1+</td>
     <td>1.7</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Mozilla 1.8</td>
     <td>Win 98+ / OSX.1+</td>
     <td>1.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Seamonkey 1.1</td>
     <td>Win 98+ / OSX.2+</td>
     <td>1.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Gecko</td>
     <td>Epiphany 2.20</td>
     <td>Gnome</td>
     <td>1.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Webkit</td>
     <td>Safari 1.2</td>
     <td>OSX.3</td>
     <td>125.5</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Webkit</td>
     <td>Safari 1.3</td>
     <td>OSX.3</td>
     <td>312.8</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Webkit</td>
     <td>Safari 2.0</td>
     <td>OSX.4+</td>
     <td>419.3</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Webkit</td>
     <td>Safari 3.0</td>
     <td>OSX.4+</td>
     <td>522.1</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Webkit</td>
     <td>OmniWeb 5.5</td>
     <td>OSX.4+</td>
     <td>420</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Webkit</td>
     <td>iPod Touch / iPhone</td>
     <td>iPod</td>
     <td>420.1</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Webkit</td>
     <td>S60</td>
     <td>S60</td>
     <td>413</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Opera 7.0</td>
     <td>Win 95+ / OSX.1+</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Opera 7.5</td>
     <td>Win 95+ / OSX.2+</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Opera 8.0</td>
     <td>Win 95+ / OSX.2+</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Opera 8.5</td>
     <td>Win 95+ / OSX.2+</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Opera 9.0</td>
     <td>Win 95+ / OSX.3+</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Opera 9.2</td>
     <td>Win 88+ / OSX.3+</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Opera 9.5</td>
     <td>Win 88+ / OSX.3+</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Opera for Wii</td>
     <td>Wii</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Nokia N800</td>
     <td>N800</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Presto</td>
     <td>Nintendo DS browser</td>
     <td>Nintendo DS</td>
     <td>8.5</td>
     <td>C/A<sup>1</sup></td>
    </tr>
    <tr>
     <td>KHTML</td>
     <td>Konqureror 3.1</td>
     <td>KDE 3.1</td>
     <td>3.1</td>
     <td>C</td>
    </tr>
    <tr>
     <td>KHTML</td>
     <td>Konqureror 3.3</td>
     <td>KDE 3.3</td>
     <td>3.3</td>
     <td>A</td>
    </tr>
    <tr>
     <td>KHTML</td>
     <td>Konqureror 3.5</td>
     <td>KDE 3.5</td>
     <td>3.5</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Tasman</td>
     <td>Internet Explorer 4.5</td>
     <td>Mac OS 8-9</td>
     <td>-</td>
     <td>X</td>
    </tr>
    <tr>
     <td>Tasman</td>
     <td>Internet Explorer 5.1</td>
     <td>Mac OS 7.6-9</td>
     <td>1</td>
     <td>C</td>
    </tr>
    <tr>
     <td>Tasman</td>
     <td>Internet Explorer 5.2</td>
     <td>Mac OS 8-X</td>
     <td>1</td>
     <td>C</td>
    </tr>
    <tr>
     <td>Misc</td>
     <td>NetFront 3.1</td>
     <td>Embedded devices</td>
     <td>-</td>
     <td>C</td>
    </tr>
    <tr>
     <td>Misc</td>
     <td>NetFront 3.4</td>
     <td>Embedded devices</td>
     <td>-</td>
     <td>A</td>
    </tr>
    <tr>
     <td>Misc</td>
     <td>Dillo 0.8</td>
     <td>Embedded devices</td>
     <td>-</td>
     <td>X</td>
    </tr>
    <tr>
     <td>Misc</td>
     <td>Links</td>
     <td>Text only</td>
     <td>-</td>
     <td>X</td>
    </tr>
    <tr>
     <td>Misc</td>
     <td>Lynx</td>
     <td>Text only</td>
     <td>-</td>
     <td>X</td>
    </tr>
    <tr>
     <td>Misc</td>
     <td>IE Mobile</td>
     <td>Windows Mobile 6</td>
     <td>-</td>
     <td>C</td>
    </tr>
    <tr>
     <td>Misc</td>
     <td>PSP browser</td>
     <td>PSP</td>
     <td>-</td>
     <td>C</td>
    </tr>
    <tr>
     <td>Other browsers</td>
     <td>All others</td>
     <td>-</td>
     <td>-</td>
     <td>U</td>
    </tr>
   </tbody>
   <tfoot>
    <tr>
     <th>Rendering engine</th>
     <th>Browser</th>
     <th>Platform(s)</th>
     <th>Engine version</th>
     <th>CSS grade</th>
    </tr>
   </tfoot>
  </table>
 </div>

 <script>
 var app = angular.module('testApp', []);
 app.controller('testCtrl', function($scope, $http)
 {
     $http.get("http://www.w3schools.com/angular/customers_mysql.php").success(function (response)
     {
   $scope.names = response.records;});
  });
 </script>
 <script type="text/javascript">
  $(document).ready(function()
  {
      $('#example').dataTable();
      $('#example2').dataTable();
  });
 </script>
</body>
</html>

Answer 1

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

下载 angular-datatable 并将 angular-datatables.min.js 文件放入您的项目中，就像我在行 <script src="angular-datatables/dist/angular-datatables.min.js"></script>[ 中所做的那样=13=]

<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>

DataTable Bootstrap 无法与 AngularJs 一起使用

DataTable Bootstrap is not working with AngularJs

jquery

datatables

angularjs