DataTable Bootstrap不能与AngularJs一起使用

时间：2015-06-20 15:06:33

标签： jquery angularjs datatables

我试图将DataTable Bootstrap与AngularJs一起使用，但DataTable就像表中没有数据一样。在下面的代码中，我有两张桌子。第一个使用AngularJs，第二个只使用纯HTML。

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

谢谢，人们！

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：8)

我使用下面的代码解决了我的问题。过滤，分页和排序都很好。

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

<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>
相关问题
最新问题