5
Sto cercando di utilizzare DataTable Bootstrap con AngularJs, ma DataTable funziona come se non ci fossero dati nella tabella. Nel codice qui sotto, ho due tavoli. Il primo utilizza AngularJs e il secondo è solo HTML.DataTable Bootstrap non funziona con AngularJs
Cosa devo fare per far funzionare la prima tabella come la seconda?
Grazie, gente!
<!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>
\t <div ng-app="testApp" ng-controller="testCtrl">
\t \t <table id="example" class="table table-bordered table-hover">
\t \t \t <thead>
\t \t \t \t <tr>
\t \t \t \t \t <th>Name</th>
\t \t \t \t \t <th>Country</th>
\t \t \t \t </tr>
\t \t \t </thead>
\t \t \t <tbody>
\t \t \t \t <tr ng-repeat="x in names">
\t \t \t \t \t <td>{{x.Name}}</td>
\t \t \t \t \t <td>{{x.Country}}</td>>
\t \t \t \t </tr>
\t \t \t </tbody>
\t \t </table>
\t \t <br />
\t \t <br />
\t \t <table id="example2" class="table table-bordered table-hover">
\t \t \t <thead>
\t \t \t \t <tr>
\t \t \t \t \t <th>Rendering engine</th>
\t \t \t \t \t <th>Browser</th>
\t \t \t \t \t <th>Platform(s)</th>
\t \t \t \t \t <th>Engine version</th>
\t \t \t \t \t <th>CSS grade</th>
\t \t \t \t </tr>
\t \t \t </thead>
\t \t \t <tbody>
\t \t \t \t <tr>
\t \t \t \t \t <td>Trident</td>
\t \t \t \t \t <td>Internet Explorer 4.0</td>
\t \t \t \t \t <td>Win 95+</td>
\t \t \t \t \t <td>4</td>
\t \t \t \t \t <td>X</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Trident</td>
\t \t \t \t \t <td>Internet Explorer 5.0</td>
\t \t \t \t \t <td>Win 95+</td>
\t \t \t \t \t <td>5</td>
\t \t \t \t \t <td>C</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Trident</td>
\t \t \t \t \t <td>Internet Explorer 5.5</td>
\t \t \t \t \t <td>Win 95+</td>
\t \t \t \t \t <td>5.5</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Trident</td>
\t \t \t \t \t <td>Internet Explorer 6</td>
\t \t \t \t \t <td>Win 98+</td>
\t \t \t \t \t <td>6</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Trident</td>
\t \t \t \t \t <td>Internet Explorer 7</td>
\t \t \t \t \t <td>Win XP SP2+</td>
\t \t \t \t \t <td>7</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Trident</td>
\t \t \t \t \t <td>AOL browser (AOL desktop)</td>
\t \t \t \t \t <td>Win XP</td>
\t \t \t \t \t <td>6</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Firefox 1.0</td>
\t \t \t \t \t <td>Win 98+/OSX.2+</td>
\t \t \t \t \t <td>1.7</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Firefox 1.5</td>
\t \t \t \t \t <td>Win 98+/OSX.2+</td>
\t \t \t \t \t <td>1.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Firefox 2.0</td>
\t \t \t \t \t <td>Win 98+/OSX.2+</td>
\t \t \t \t \t <td>1.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Firefox 3.0</td>
\t \t \t \t \t <td>Win 2k+/OSX.3+</td>
\t \t \t \t \t <td>1.9</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Camino 1.0</td>
\t \t \t \t \t <td>OSX.2+</td>
\t \t \t \t \t <td>1.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Camino 1.5</td>
\t \t \t \t \t <td>OSX.3+</td>
\t \t \t \t \t <td>1.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Netscape 7.2</td>
\t \t \t \t \t <td>Win 95+/Mac OS 8.6-9.2</td>
\t \t \t \t \t <td>1.7</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Netscape Browser 8</td>
\t \t \t \t \t <td>Win 98SE+</td>
\t \t \t \t \t <td>1.7</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Netscape Navigator 9</td>
\t \t \t \t \t <td>Win 98+/OSX.2+</td>
\t \t \t \t \t <td>1.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.0</td>
\t \t \t \t \t <td>Win 95+/OSX.1+</td>
\t \t \t \t \t <td>1</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.1</td>
\t \t \t \t \t <td>Win 95+/OSX.1+</td>
\t \t \t \t \t <td>1.1</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.2</td>
\t \t \t \t \t <td>Win 95+/OSX.1+</td>
\t \t \t \t \t <td>1.2</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.3</td>
\t \t \t \t \t <td>Win 95+/OSX.1+</td>
\t \t \t \t \t <td>1.3</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.4</td>
\t \t \t \t \t <td>Win 95+/OSX.1+</td>
\t \t \t \t \t <td>1.4</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.5</td>
\t \t \t \t \t <td>Win 95+/OSX.1+</td>
\t \t \t \t \t <td>1.5</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.6</td>
\t \t \t \t \t <td>Win 95+/OSX.1+</td>
\t \t \t \t \t <td>1.6</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.7</td>
\t \t \t \t \t <td>Win 98+/OSX.1+</td>
\t \t \t \t \t <td>1.7</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Mozilla 1.8</td>
\t \t \t \t \t <td>Win 98+/OSX.1+</td>
\t \t \t \t \t <td>1.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Seamonkey 1.1</td>
\t \t \t \t \t <td>Win 98+/OSX.2+</td>
\t \t \t \t \t <td>1.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Gecko</td>
\t \t \t \t \t <td>Epiphany 2.20</td>
\t \t \t \t \t <td>Gnome</td>
\t \t \t \t \t <td>1.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Webkit</td>
\t \t \t \t \t <td>Safari 1.2</td>
\t \t \t \t \t <td>OSX.3</td>
\t \t \t \t \t <td>125.5</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Webkit</td>
\t \t \t \t \t <td>Safari 1.3</td>
\t \t \t \t \t <td>OSX.3</td>
\t \t \t \t \t <td>312.8</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Webkit</td>
\t \t \t \t \t <td>Safari 2.0</td>
\t \t \t \t \t <td>OSX.4+</td>
\t \t \t \t \t <td>419.3</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Webkit</td>
\t \t \t \t \t <td>Safari 3.0</td>
\t \t \t \t \t <td>OSX.4+</td>
\t \t \t \t \t <td>522.1</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Webkit</td>
\t \t \t \t \t <td>OmniWeb 5.5</td>
\t \t \t \t \t <td>OSX.4+</td>
\t \t \t \t \t <td>420</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Webkit</td>
\t \t \t \t \t <td>iPod Touch/iPhone</td>
\t \t \t \t \t <td>iPod</td>
\t \t \t \t \t <td>420.1</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Webkit</td>
\t \t \t \t \t <td>S60</td>
\t \t \t \t \t <td>S60</td>
\t \t \t \t \t <td>413</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Opera 7.0</td>
\t \t \t \t \t <td>Win 95+/OSX.1+</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Opera 7.5</td>
\t \t \t \t \t <td>Win 95+/OSX.2+</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Opera 8.0</td>
\t \t \t \t \t <td>Win 95+/OSX.2+</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Opera 8.5</td>
\t \t \t \t \t <td>Win 95+/OSX.2+</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Opera 9.0</td>
\t \t \t \t \t <td>Win 95+/OSX.3+</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Opera 9.2</td>
\t \t \t \t \t <td>Win 88+/OSX.3+</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Opera 9.5</td>
\t \t \t \t \t <td>Win 88+/OSX.3+</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Opera for Wii</td>
\t \t \t \t \t <td>Wii</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Nokia N800</td>
\t \t \t \t \t <td>N800</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Presto</td>
\t \t \t \t \t <td>Nintendo DS browser</td>
\t \t \t \t \t <td>Nintendo DS</td>
\t \t \t \t \t <td>8.5</td>
\t \t \t \t \t <td>C/A<sup>1</sup></td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>KHTML</td>
\t \t \t \t \t <td>Konqureror 3.1</td>
\t \t \t \t \t <td>KDE 3.1</td>
\t \t \t \t \t <td>3.1</td>
\t \t \t \t \t <td>C</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>KHTML</td>
\t \t \t \t \t <td>Konqureror 3.3</td>
\t \t \t \t \t <td>KDE 3.3</td>
\t \t \t \t \t <td>3.3</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>KHTML</td>
\t \t \t \t \t <td>Konqureror 3.5</td>
\t \t \t \t \t <td>KDE 3.5</td>
\t \t \t \t \t <td>3.5</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Tasman</td>
\t \t \t \t \t <td>Internet Explorer 4.5</td>
\t \t \t \t \t <td>Mac OS 8-9</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>X</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Tasman</td>
\t \t \t \t \t <td>Internet Explorer 5.1</td>
\t \t \t \t \t <td>Mac OS 7.6-9</td>
\t \t \t \t \t <td>1</td>
\t \t \t \t \t <td>C</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Tasman</td>
\t \t \t \t \t <td>Internet Explorer 5.2</td>
\t \t \t \t \t <td>Mac OS 8-X</td>
\t \t \t \t \t <td>1</td>
\t \t \t \t \t <td>C</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Misc</td>
\t \t \t \t \t <td>NetFront 3.1</td>
\t \t \t \t \t <td>Embedded devices</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>C</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Misc</td>
\t \t \t \t \t <td>NetFront 3.4</td>
\t \t \t \t \t <td>Embedded devices</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>A</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Misc</td>
\t \t \t \t \t <td>Dillo 0.8</td>
\t \t \t \t \t <td>Embedded devices</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>X</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Misc</td>
\t \t \t \t \t <td>Links</td>
\t \t \t \t \t <td>Text only</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>X</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Misc</td>
\t \t \t \t \t <td>Lynx</td>
\t \t \t \t \t <td>Text only</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>X</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Misc</td>
\t \t \t \t \t <td>IE Mobile</td>
\t \t \t \t \t <td>Windows Mobile 6</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>C</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Misc</td>
\t \t \t \t \t <td>PSP browser</td>
\t \t \t \t \t <td>PSP</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>C</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>Other browsers</td>
\t \t \t \t \t <td>All others</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>-</td>
\t \t \t \t \t <td>U</td>
\t \t \t \t </tr>
\t \t \t </tbody>
\t \t \t <tfoot>
\t \t \t \t <tr>
\t \t \t \t \t <th>Rendering engine</th>
\t \t \t \t \t <th>Browser</th>
\t \t \t \t \t <th>Platform(s)</th>
\t \t \t \t \t <th>Engine version</th>
\t \t \t \t \t <th>CSS grade</th>
\t \t \t \t </tr>
\t \t \t </tfoot>
\t \t </table>
\t </div>
\t <script>
\t var app = angular.module('testApp', []);
\t app.controller('testCtrl', function($scope, $http)
\t {
\t \t $http.get("http://www.w3schools.com/angular/customers_mysql.php").success(function (response)
\t \t {
\t \t \t $scope.names = response.records;});
\t \t });
\t </script>
\t <script type="text/javascript">
\t \t $(document).ready(function()
\t \t {
\t \t $('#example').dataTable();
\t \t $('#example2').dataTable();
\t \t });
\t </script>
</body>
</html>
Vedere questo -> http://stackoverflow.com/q/30940271/ 1407478 – davidkonrad
Grazie, @davidkonrad! usando la tua soluzione, alcune funzioni funzionano bene, ma altre no. Continuerò a provare altre soluzioni. =] – herbert