Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

DataTable Bootstrap is not working with AngularJs

Tags:

jquery

angularjs

datatables

I'm trying to use DataTable Bootstrap with AngularJs, but DataTable works like there is no data in the table. In the code below, I've got two tables. The first one uses AngularJs and the second is only plain HTML.

What do I need to do to make the first table work like the second?

Thanks, People!

<!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>
like image 413
herbert Avatar asked Jun 20 '15 15:06

herbert

1 Answers

I solved my problem using the code below. The filtering, pagination and sorting are working good.

Download angular-datatable and put angular-datatables.min.js file in your project as I did in the line <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>
like image 145
herbert Avatar answered Oct 22 '22 13:10

herbert
Sign in to Comment

Related questions

jquery how clone bootstrap row
External page disappears on refresh - jquery mobile
3D cylinder loses integrity on small values
Android - Javascript: how to execute jquery in webview
No key events during HTML5 drag and drop
Building a seatmap with kind of wings for the plane
What is the .ajax() equivalent of .load()?
Custom shaped block
Populate a drop down using result from a previous drop down [duplicate]
Will not resolving a deferred create memory leaks?
Add and remove class active on button with jquery onclick function
No scrolling after closing lightbox (blueimp)
How to check specific field is valid or not using jQuery validation plugin? [duplicate]
How to make pull down Page refresh on Web app using jQuery Mobile or Javascript
jquery DataTables row reordering: order reverts back after drop
moment.js 2 digit year converting wrong 4 digit year
Full Calendar Time interval Should be 1 hour and start from 6:30
Checkbox onchange event not firing
Dynamic addition of textbox not working
Specific key count in json jquery

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!