Question

我对angular不熟悉，我不知道为什么它在运行snipet时看起来很奇怪（表看起来不正确），它不给我外观和感觉就像datatable。
我想给它像this这样的UI，我也尝试更改css的版本，但没有帮助。
谁能帮助我解决这个问题。任何帮助将不胜感激。
谢谢您。

//Angularjs and jquery.datatable with ui.bootstrap and ui.utils

var app=angular.module('formvalid', ['ui.bootstrap']);
app.controller('validationCtrl',function($scope){
	 var table = $('#ajaxExample').DataTable({
					"ajax" : {
						"url": "http://datatable.getsandbox.com/datatable",
						"dataSrc": "users",
						"headers": "Content-Type : application/json"
					},
					"columns" : [
						{ "data": "name" },
						{ "data": "age" },
						{ "data": "position" },
						{ "data": "office" },
					],
	 });
	
});

		table tr th{
		  background:#337ab7;
		  color:white;
		  text-align:left;
		  vertical-align:center;
		}

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>datatable using jquery.datatable in angularjs</title>
		<link rel='stylesheet prefetch'
			href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
		<link rel='stylesheet prefetch'
			href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
	</head>
<body>

	<div class="container" ng-app="formvalid">
		<div class="panel" data-ng-controller="validationCtrl">
			<div class="panel-heading border">
				<h2>Data table using jquery datatable in Angularjs</h2>
			</div>
			<div class="panel-body">
				<table id="ajaxExample" class="display" width="100%" ui-jq="datatable" ui-options="ajaxOptions">
					<thead>
					<tr>
					<th>Name</th>
					<th>Age</th>
					<th>Position</th>
					<th>Office</th>
					</tr>
					</thead>
				</table>
			</div>
		</div>
		
	</div>
	<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
	<script
		src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
	<script
		src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js'></script>
	<script
		src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js'></script>
	<script
		src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js'></script>
	<script
		src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>

</body>

</html>

Answer 1

要从dataTables.bootstrap.min.css文件附加引导表样式，您需要向表元素中添加类。

class="table table-striped table-bordered"

否则，您将获得标准的引导表样式。

如果您使用链接页面上的HTML选项卡，它会显示该页面上表格的样式。

为什么UI无法正确显示

1 个答案: